Spring boot + React 게시판

Spring boot에서 front를 react로 사용해서 게시판 작성중 데이터들이 json형태로 넘겨지긴 하는대 이걸 알고 react 지식이 너무 얕아서
배열로 넘겨준 데이터를 받는 방법을 찾고있었음
axios를 사용해서 초기 코드는

import {useEffect, useState} from "react";
import axios from "axios";


function App() {
    const [data, setdata] = useState('')
    useEffect(() => {
        axios.get('/api/list')
            .then(response => setdata(response.data))
            .catch(error => console.log(error))
    }, []);



    return (
        <div>
            {data.totalPage}
        </div>
    );
}

export default App;

저렇게 data를 그냥 담아서 사용했더니 배열말고 일반적인 형식의 데이터는 잘 출력됨

하지만

{
	"dtoList": [
		{
			"bno": 201,
			"author": "콜라곰",
			"title": "곰곰",
			"content": "내용곰",
			"regDate": "2022-08-16T16:16:31.181001",
			"modDate": "2022-08-16T16:16:31.181001"
		},이하 생략....
	]
}

이런 형식의 데이터는

import {useEffect, useState} from "react";
import axios from "axios";


function App() {
    const [data, setdata] = useState('')
    useEffect(() => {
        axios.get('/api/list')
            .then(response => setdata(response.data))
            .catch(error => console.log(error))
    }, []);



    return (
        <div>
            <ul>
                {data.map(item => (
                    <li key={item.bno}>
                        <h3>{item.title}</h3>
                        <p>{item.author}</p>
                        <p>{item.content}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default App;          

이렇게 보내도 오류가 났음
해결 방법은 지인을 통해서 도움을 받음

const [data, setdata] = useState([]);

React의 useState(Hook)을 배열로 주면 된다

그리고 Axios에서 메서드 응답에 성공시(.then) response안에 data중에 dtoList배열의 값을 가져오면 db에서 원하는 내용을 담을수있다

import {useEffect, useState} from "react";
import axios from "axios";


function App() {
    const [data, setdata] = useState([]);
    useEffect(() => {
        axios.get('/api/list')
            .then(response => setdata(response.data.dtoList))
            .catch(error => console.log(error))
    }, []);


    return (
        <div>
            <ul>
                {data.map(item => (
                    <li key={item.bno}>
                        <h3>{item.title}</h3>
                        <p>{item.author}</p>
                        <p>{item.content}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default App;

그렇지만 더 보완해야 할 점이 생각났다
게시판 조회페이지를 처리하는대 필요한 paging 데이터들도 같이 담아서 보낸건대
.then으로 dtoList만 가져오면 다른 totalPage등은 어떻게 가져와야 할까?

지인의 도움을 받아서 답을 얻었음
response에서 데이터를 받을때 구조 분해 할당을 사용해서

import {useEffect, useState} from "react";
import axios from "axios";


function App() {
    const [list, setList] = useState([]);
        const [etc, setEtc] = useState(null);
        useEffect(() => {
            axios.get('/api/list')
                .then(response => {
                    const {dtoList, ...Etc} = response.data;
                    setList(dtoList);
                    setEtc(Etc);
                })
            .catch(error => console.log(error))
    }, []);
    return (

        <div>
            {etc.totalPage}
            <ul>
                {list.map(item => (
                    <li key={item.bno}>
                        <h3>{item.title}</h3>
                        <p>{item.author}</p>
                        <p>{item.content}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default App;

이런식으로 받아주면됨 특히

const {dtoList, ...Etc} = response.data;

이부분이 중요함 dtoList만 list에 담고서
나머지는 etc에 담아주면 내가 원하던대로 게시글 정보와 페이징 처리할 변수들이 따로 담김

이 방식에도 문제가 있는대 그건 계속 새로고침 하다보면
etc에 null값이 담길수가 있음 그 이유는 비동기 방식이라서 널 체크를 해줘야함

브라우저에서 호출하고 데이터가 오기도 전에
먼저 랜더링 해버려서 생김

가장 쉬운 널 체크는
{etc.totalPage} -> {etc && etc.size}형태로 해주면됨

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax