Spring Boot와 React 연동하기: 간단한 예제

안녕하세요! 오늘은 Spring Boot 백엔드와 React 프론트엔드를 연동하여 간단한 웹 애플리케이션을 만들어 보겠습니다. 이 프로젝트는 기본적인 사용자 정보를 CRUD(Create, Read, Update, Delete)하는 기능을 포함하고 있습니다.

Spring + React

1. 프로젝트 설정하기

Spring Boot 프로젝트 생성

우선 Spring Boot 프로젝트를 생성하기 위해 Spring Initializr( https://start.spring.io )로 이동합니다. 필요한 종속성은 다음과 같습니다:

• Spring Web
• Spring Data JPA
• H2 Database (인메모리 데이터베이스)

그 후 프로젝트를 다운로드하여 IDE에서 열어줍니다.

2. 엔티티 생성하기

사용자 정보를 저장할 User 엔티티를 생성합니다.

package com.example.demo.entity;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String email;

    // 기본 생성자, getter, setter 생략
}

이제 User 엔티티를 통해 기본적인 정보를 저장할 수 있게 되었습니다.

3. 리포지토리 생성하기

데이터베이스와 인터페이스를 제공하는 UserRepository를 생성합니다.

package com.example.demo.repository;

import com.example.demo.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<user, long=""> {
}</user,>

4. 서비스 및 컨트롤러 생성하기

서비스 클래스를 만들어 사용자의 비즈니스 로직을 처리합니다.

package com.example.demo.service;

import com.example.demo.entity.User;
import com.example.demo.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserService {
    @Autowired
    private UserRepository userRepository;

    public List getAllUsers() {
        return userRepository.findAll();
    }

    public User saveUser(User user) {
        return userRepository.save(user);
    }

    // Update와 Delete는 생략합니다.
}

UserService 클래스를 통해 사용자는 저장 및 조회가 가능합니다.

package com.example.demo.controller;

import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping
    public List getAllUsers() {
        return userService.getAllUsers();
    }

    @PostMapping
    public User createUser(@RequestBody User user) {
        return userService.saveUser(user);
    }
}

2. React 프론트엔드 설정하기

React 애플리케이션 생성

이제 React 애플리케이션을 만들겠습니다. 터미널에 다음 명령어를 입력하여 새로운 React 애플리케이션을 생성합니다:

npx create-react-app user-management

3. Axios 설치하기

HTTP 클라이언트인 Axios를 설치하여 API 호출을 진행합니다:

npm install axios

4. 사용자 추가 및 목록 표시

이제 API와 연동하여 사용자 목록을 표시해 보겠습니다. 다음과 같은 구조로 컴포넌트를 작성합니다:

 

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const UserComponent = () => {
    const [users, setUsers] = useState([]);
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');

    useEffect(() => {
        axios.get("/api/users").then(response => {
            setUsers(response.data);
        });
    }, []);

    const addUser = (e) => {
        e.preventDefault();
        axios.post("/api/users", { name, email }).then(response => {
            setUsers([...users, response.data]);
            setName('');
            setEmail('');
        });
    };

    return (
        <div>
            <h1>User Management</h1>
            <form onSubmit={addUser}>
                <input 
                    type="text" 
                    value={name} 
                    onChange={(e) => setName(e.target.value)} 
                    placeholder="Name" 
                    required />
                <input 
                    type="email" 
                    value={email} 
                    onChange={(e) => setEmail(e.target.value)} 
                    placeholder="Email" 
                    required />
                <button type="submit">Add User</button>
            </form>
            <ul>
                {users.map(user => <li key={user.id}>{user.name} ({user.email})</li>)}
            </ul>
        </div>
    );
};

export default UserComponent;

위의 코드로 사용자 추가 및 목록 표시 기능을 구현했습니다.

3. 서버와 클라이언트 실행하기

이제 모든 설정이 끝났습니다! Spring Boot 서버를 실행한 후, React 프론트엔드를 실행해보세요. 클라이언트가 서버 API를 잘 호출하는지 확인할 수 있습니다.

 

웹 애플리케이션을 실행하는 화면의 스크린샷을 삽입해주세요.

 

이제 Spring Boot와 React를 연동한 간단한 예제를 통해 기본적인 CRUD 기능을 손쉽게 구현할 수 있었습니다.

 

참고 링크:

• Spring REST Service
• React 공식 문서