React axios 데이터가 제대로 담기지 않는 문제 해결

[JSON]

[

{

    "boardInputDate": "2024-01-02",

    "boardContent": "별 내용입니다",

    "boardPicture": "이미지 링크",

    "boardAccess": "OPEN",

    "boardLike": 3,

    "hashContent": ["밥", "저녁"]

}

]

 

useEffect(() => {

        const fetchBoardData = async () => {

            try {

                const responses = await Promise.all(

                    reportData.map((it) => {

                        axios.get(

                            `https://d9434a94-4844-4787-a437-ceb2559ee35c.mock.pstmn.io/board/${it.boardIndex}`

                        );

                    })

                );

                const newBoardContent = responses.map(

                    (res) => res.data.boardContent

                );

                setBoardContent(newBoardContent);

            } catch (error) {

                console.error(error);

            }

        };

        if (reportData.length > 0) {

            fetchBoardData();

        }

    }, [reportData]);

 

목적

위에서 report API를 호출하여 boardIndex 정보를 가져오고, 그 인덱스로 새 API를 호출해서 boardContent JSON만 받아오려고 했다. 

 

문제 상황

이상하게 res.data까지는 데이터가 잘 들어오는데 boardContent를 확인해보면 undefined만 찍혔다.

처음에는 당연히 비동기 문제겠거니 싶어서 reportData가 들어왔을 때만 API가 호출되게 만들었고, responses.map 앞에 responses&&도 넣어서 데이터가 확실하게 들어왔을 경우에만 boardContent를 추출하게 만들었다. 그런데도 계속 undefined로 찍혔다.

정말 미스테리했던 것이, boardContent가 비어있지 않은 경우에만 렌더링되게 조건을 설정해놨는데 boardContent가 undefined인데도 값이 렌더링됐다. chat GPT에게도 물어봤는데 비동기 문제라며 같은 말만 반복할뿐이었다. 수정된 코드라고 보내주는데 내 코드랑 똑같았다...

 

해결

12시간동안 잡고 있다가 겨우 해결했는데, 나의 멍청한 실수였다.

두가지 문제가 있었는데

1. axios.get 앞에 중괄호를 넣어 결과값이 return되지 않았다. 따라서 Promise.all은 요청결과를 받지 못하고 비어있는 프로미스 배열을 받게 된다. 함수를 만들 때 생겼던 습관이 내 12시간을 날려버린 것이다...

2. JSON 데이터 접근 방식이 잘못됐다. res.data를 찍어보면 데이터가 이렇게 나오고 각 객체는 배열의 인덱스로 접근해야한다. JSON에 접근할 때 항상 삽질을 많이 하는 것 같다 ㅎ...

useEffect(() => {

        const fetchBoardData = async () => {

            try {

                const responses = await Promise.all(

                    reportData.map((it) =>

                        axios.get(

                            `https://d9434a94-4844-4787-a437-ceb2559ee35c.mock.pstmn.io/board/${it.boardIndex}`

                        )

                    )

                );

                const newBoardContent = responses.map(

                    (res, index) => res.data[index].boardContent

                );

                setBoardContent(newBoardContent);

            } catch (error) {

                console.error(error);

            }

        };

        if (reportData.length > 0) {

            fetchBoardData();

        }

    }, [reportData]);

 

최종 코드는 이렇다. 같은 실수를 반복하지말자!!

JSON 접근 방법은 항상 헷갈리는데, 여기 좋은 예제가 있다.

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON