[ REACT / SPRING BOOT ] React 와 Spring Boot 연동하기

 

1. Spring Boot 생성

https://start.spring.io/ 에서 설정하여 생성된 프로젝트를 import 해준다.

빌드가 완료된 후에, 프로젝트를 Run시키면 포트 8080에서 톰캣이 시작되었다는 콘솔 메세지가 뜹니다.

 

http://localhost:8080 에 들어가게 되면, 에러 페이지가 보입니다!

 

 

2. React.js 설치

프로젝트 내의 터미널을 키고 코드를 실행해줍니다.

cd src/main
npx create-react-app kongfront	# npx create-react {프로젝트명}

 

💢 단, 프로젝트명에 대문자가 포함되면 안됩니다

 

설치가 완료되면, 위와 같이 Spring Boot 프로젝트 내에 React 폴더가 생성됩니다.

 

해당 폴더 내에 들어가서 npm start 로 프로젝트를 구동시키고,

http://localhost:3000 에 들어가게 되면, 아래 화면이 보입니다!

 

 

 

3. React.js 와 Spring Boot 연동하기

Proxy 설정
CORS 관련 오류를 방지하기 위해 proxy를 설정해주도록 하겠습니다.

CORS (Cross Origin Resource Sharing)
서버와 클라이언트가 동일한 IP주소에서 동작하고 있다면, resource를 제약 없이 서로 공유할 수 있지만, 만약 다른 도메인에 있다면 원칙적으로 어떤 데이터도 주고받을 수 없도록 하는 매커니즘입니다.

 

kongfront 폴더의 package.json 파일 이동후 아래 설정 구문 추가해줍니다.

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

 

src/main/kongfront 폴더에서 필요한 모듈을 설치해줍니다.

npm install http-proxy-middleware --save

src/main/kongfront/src 폴더에서 setProxy.js 파일을 생성하고, 아래의 코드를 붙여넣기합니다.

// src/main/kongfront/src/setProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8080',
      changeOrigin: true,
    })
  );
};

이제 프론트엔드에서 '/api'로 요청을 보내면, 백엔드인 8080포트(=target)로 요청이 도착하게 됩니다.

Axios를 이용한 서버 통신

Axios란 백엔드와 프론트엔드 사이의 통신을 쉽게 하기 위해 사용하는 라이브러리입니다.

1. 프론트엔드
src/main/kongfront 폴더에서 axios를 설치해줍니다.

npm install axios --save

src/main/kongfront/src/App.js의 내용을 지우고 아래 코드를 붙여넣기 해주세요.

// src/main/kongfront/src/App.js

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

function App() {
   const [hello, setHello] = useState('')

    useEffect(() => {
        axios.get('/api/hello')
        .then(response => setHello(response.data))
        .catch(error => console.log(error))
    }, []);

    return (
        <div>
            백엔드에서 가져온 데이터입니다 : {hello}
        </div>
    );
}

export default App;

2. 백엔드
src/main/java/com.toy.kongtown 에서 Controller 패키지를 생성하고, CommonController.java 파일을 만들어주겠습니다.

// /controller/CommonController.java

package com.toy.kongtown.Controller;

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

@RestController
public class CommonController {

    @GetMapping("/api/hello")
    public String test() {
        return "Hello, world!";
    }
}

 

 

3. 실행

스프링 프로젝트를 빌드하고 실행해줍니다. npm start로 리액트도 실행시켜주어야 합니다!

아래와 같이 localhost:3000에서 localhost:8080/api/hello 로부터 데이터를 요청해 받아와 출력하는 것을 볼 수 있습니다.

 

 

 

 

 

 

🔗 https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85

       https://lucas-owner.tistory.com/8