React - 스프링 부트와 연동하기

 

 

사이드 프로젝트를 시작했는데, 프론트 엔드는 리액트로 만들고 백엔드는 인텔리 제이를 이용한 스프링 부트로 설정했다.

따라서 프론트와 백이 완전히 분리되어 두 개의 프로젝트가 되었다.

이제 둘을 연동하는 작업을 해보자.

 

 

Window

서버: Spring Boot v3.2.4

언어: Java 17

빌드: Gradle

IDE: IntelliJ Community

프론트: React, VS Code

---

 

 

 

1. 리액트 폴더 내의 package.json 파일 안에 아래 한 줄을 추가한다.

내 포트 번호는 따로 바꾸지 않아 8080 그대로이다. 만약 다른 번호라면 바꾸도록 하자.

 

"proxy": "http://localhost:8080",

 

 

 

2. Spring Boot 안에 테스트 컨트롤러 생성하기.

 

@RestController
public class TestController {
        @GetMapping("/test/hello")
        @ResponseBody
        public String hello() {
            return "hello. 안녕하세요.";
        }
}

 

 

 

3. 리액트 안에 axios(npm 또는 yarn으로) 설치 및 해당 백엔드 주소를 요청하는 axios 생성하기.

 

yarn add axios

 

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import logo from './logo.svg';
import './App.css';

function App() {
    const [message, setMessage] = useState("");

    useEffect(() => {
        axios.get("/test/hello")
            .then(response => {
                setMessage(response.data);
            })
            .catch(error => {
                console.error("error", error);
            });
    }, []);
    return (
      <div className="App">
          <header className="App-header">
              <img src={logo} className="App-logo" alt="logo"/>
              <h1 className="App-title">{message}</h1>
          </header>
      </div>
    )
}

export default App;

 

 

 

4. 연동이 잘 되었다면 아래와 같은 화면이 나온다.