spring에서 전송한 데이터를 react에서 출력하는 로직을 구현하게 되었습니다.
우선은 배포가 아닌 테스트를 위한 동작이므로 프로젝트를 합치지 않고 동작하도록 하였습니다.
http://localhost:8080/api/
우선은 url에 들어가서 데이터가 잘 전송되었는지 확인해주었습니다.
예제 데이터로 최신순으로 생성된 글 createDateSort과 좋아요 순으로 정렬된 글 likeSort를 반환해주는 로직입니다.
프로젝트에 package.json이라는 파일에 "proxy": "http://localhost:8080"
를 추가해 줍니다. url포트나 링크가 다르면 링크 값은 백앤드 url로 변경해주시길 바랍니다.
해당 커맨드를 react프로젝트에서 입력하여 설치해주시면됩니다.
npm
npm install axios
yarn
yarn add axios
import './App.css';
import React, {useState, useEffect} from "react";
import axios from "axios";
function App() {
const [createDateSort, setCreateDateSort] = useState([]);
const [likeSort, setLikeSort] = useState([]);
useEffect(() => {
axios('/api/')
.then(res => {
setCreateDateSort(res.data.createDateSort);
setLikeSort(res.data.likeSort);
})
})
return (
<div style={{textAlign: "center"}}>
{createDateSort.map(v => <div>{v.title}</div>)}
<hr/>
{likeSort.map(v => <div>{v.title}</div>)}
</div>
);
}
export default App;
여기서 useState안에 소괄호 안에 값은 초기값으로 들어가는 값이 일치하지 않으면 재대로 동작하지 않으므로 값을 초기값을 재대로 정해주어야합니다.
http://localhost:3000/
에 접속하여 재대로 값을 불러오는 것을 확인할 수 있었습니다.