인터넷을 뒤져보면 너무들 복잡하게 설명해놨는데 다음과 같이하면 간단합니다.
1. Spring boot에서 프로젝트를 만들고 간단하게 RestController1개를 만든다.
|
import java.util.Arrays;
import java.util.List;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HomeController {
@GetMapping("/names")
public List<String> names(){
return Arrays.asList("한놈,두시기,석삼,너구리,오징어,육계장,칠면조,팔다리,구두쇠,쨍그랑".split(","));
}
}
|
2. Spring boot 프로젝트를 실행하고 http://locahost:8080/names 로 접급해 봅니다.
3. 리액트에서 프로젝트를 만듭니다.
package.json 파일을 열어 "proxy" : "http://localhost:8080", 를 다음과 같이 추가 합니다.
|
{
"name": "boot-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"proxy" : "http://localhost:8080",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
|
index.js파일을 다음과 같이 변경 합니다.
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
|
App.js파일을 다음과 같이 변경합니다.
|
import { useEffect, useState } from "react";
function App() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("/names")
.then((res) => {
return res.json();
})
.then(function (result) {
setData(result);
})
},[]);
return (
<div>
Boot에서 받아온 데이터
<hr/>
<ul>
{
data.map((d)=><li key={d}>{d}</li>)
}
</ul>
</div>
);
}
export default App;
|
index.html 파일을 다음과 같이 변경합니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spring Boot와 React 연동하기</title>
</head>
<body>
<h2>Spring Boot와 React 연동하기</h2>
<div id="root"></div>
</body>
</html>
|
src폴더와 public폴더의 파일들을 위의 3개만 남기고 모두 지웁니다.
프로젝트를 실행합니다. 아래와 같이 스프링 프로젝트에서 데이터를 가져와 표시가 됩니다.
이렇게 따로 따로 프로젝트를 수행하여 모두 완성을 하였다면 리액트와 스프링 프로젝트를 합치겠습니다.
4. 리액트 프로젝트를 빌드합니다.
| npm run build |
실행이 완료되면 build폴더에 결과물이 나타납니다.
이 폴더에서 index.html파일과 static폴더를 복사해서 스프링 프로젝트의 src/main/resources/static 폴더 밑에 붙여넣기 합니다.
5. 스프링 부트 프로젝트를 실행하고 http://locahost:8080에 접속하면 끝입니다.
jar파일을 만들어 배포하면 됩니다.
