[Spring][React] 전송 받은 json데이터 받기

spring에서 전송한 데이터를 react에서 출력하는 로직을 구현하게 되었습니다.
우선은 배포가 아닌 테스트를 위한 동작이므로 프로젝트를 합치지 않고 동작하도록 하였습니다.

Spring

데이터 전송 확인

http://localhost:8080/api/

우선은 url에 들어가서 데이터가 잘 전송되었는지 확인해주었습니다.
예제 데이터로 최신순으로 생성된 글 createDateSort과 좋아요 순으로 정렬된 글 likeSort를 반환해주는 로직입니다.

React

프록시 추가

프로젝트에 package.json이라는 파일에 "proxy": "http://localhost:8080"를 추가해 줍니다. url포트나 링크가 다르면 링크 값은 백앤드 url로 변경해주시길 바랍니다.

axios 설치

해당 커맨드를 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/`에 접속하여 재대로 값을 불러오는 것을 확인할 수 있었습니다.