[Spring boot + React] Rest Api 연동하기

구조

기본적으로 Spring 프로젝트 내부에 React가 들어가는 형식의 구조로 구성한다.

프로젝트 구조는 본인 편한 대로 구성해도 무방하다.

---

Spring 프로젝트 생성

start.spring.io

spring project 생성은 이곳으로

본인이 선호하는 java 버전과 프로젝트 내용을 선택하여 만들면 된다.

spring project

frontend를 제외하고 위와 같이 프로젝트가 생성이 된다.

---

React 프로젝트 생성

이제 react 프로젝트를 생성할 건데 위치는 원하는 곳에 넣어주면 된다.

나는 spring 프로젝트의 루트 디렉토리에 생성하였다.

npx create-react-app {project name}

{project name} 이라고 적은 곳에 원하는 app 이름을 작성하면 된다.

react project

---

proxy 설정

이상태로는 프론트와 백이 서로 다른 포트를 사용하여 CORS 문제가 발생한다.

CORS는 간단히 얘기하자면 도메인, 포트 등 다른 곳에서 서버로 접근을 할 시 브라우저가 차단하는 것을 말한다.

CORS란

CORS란 무엇인가? – Yunseok's Dev Blog

이를 해결하기 위해 react에서 proxy를 설정해준다.

package.json

react 프로젝트에 package.json 파일에 들어가 proxy를 적용해준다.

이때 url은 본인이 만든 서버의 url과 포트를 적어주면 된다.

---

Backend

서버에서는 생성된 패키지에 controller 패키지를 추가하여 controller를 생성해준다.

backend

package com.example.board.Controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Arrays;
import java.util.List;

@RestController
public class HelloController {

    @GetMapping("/api/hello")
    public List<String> Hello(){
        return Arrays.asList("서버서버", "뷰뷰");
    }
}

return 형식은 선호하는 대로 적으면 되지만 보통 rest api를 통해 프론트로 json 형태의 데이터를 넘겨주기 때문에 이런 식으로 데이터를 return 하는 것이 좋다.

---

Frontend

프론트에서는 useEffect와 fetch를 사용해 api에 접근하여 데이터를 받아온 뒤 출력하는 내용을 적는다.

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

function App() {
  const [msg, setMsg] = useState([]);
  useEffect(() => {
    fetch("/api/hello")
        .then((res) => {return res.json();})
        .then((data) => {setMsg(data);})
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <ul>
          {msg.map((content, idx) => <li key={`${idx} - ${content}`}>{content}</li>)}
        </ul>
      </header>
    </div>
  );
}

export default App;

---

실행

Spring 과 react를 각자 빌드한 뒤 react에 접속하면

web page

제대로 데이터를 받아오는 것을 확인할 수 있다. 끝.