리액트 axios 데이터 받아와서 랜더링 질문드립니다

Question

useState로 postList라는 이름의 state를 선언한 후 axios를 통해 얻은 결과를 setPostList를 통해 postList에 업데이트 시키고 . 그러면 state가 변경되었으므로 새롭게 렌더링이 되고 -> return이 다시 불리며 -> 변경된 값을 화면에 업데이트 시켜줄 주는걸로 알고있는데 function PostList() { const [postList, setPostList] = useState([]); //const headers = { Authorization: `JWT ${jwtToken}` }; const [{ data: originPostList, loading, error }, refetch] = useAxios({ url: "/api/posts/", //headers }); useEffect(() => { setPostList(originPostList); console.log("mouted"); }, [originPostList]); console.log("loaded respaonse2 :", postList); return (

{postList && postList['results'].length === 0 && ( )} {postList && postList['results'].map(post => ( ))}

); } export default PostList; loaded respaonse2 : [] loaded respaonse2 : [] loaded respaonse2 : [] loaded respaonse2 : [] 콘솔창에 이렇게 4번이 뜹니다 어쩔때는 postList에 데이터가 들어가서 나오는데 useEffect에서 셋 시켜서 데이터가 들어갔는데도 빈 데이터가 나오는지 궁굼합니다. return 문에 postList 가져오는 구문을 없애면 제대로 들어가는데 예외처리를 했는데도 map 찾을수 없다는 에러가 뜹니다 그리고 Simple jwt 토큰 인증을 쓰지 않으면 데이터는 잘가져옵니다

이진석 · Answer

안녕하세요. 함수 컴포넌트 바로 아래 depth의 코드들은 해당 컴포넌트가 렌더링될 때마다 수행이 됩니다. 그러니 아직 setPostList에 의해서 데이터가 채워지기 전인데 PostList 컴포넌트의 상탯값이 바뀌는 등의 여러가지 이유로 재렌더링이 발생한다면 쓰신 loaded respaonse2 메세지는 여러 번 출력될 수 있습니다. 그리고 originPostList를 바라보는 useEffect에서는 - useAxios를 통해 받은 originPostList 상탯값의 초기값은 undefined이며, API 응답을 받게 되면 이 후에 상탯값이 변경되게 되겠죠. - 그러니 originPostList를 바라보는 useEffect에 지정된 함수는 첫번째 호출에서 originPostList가 undefined일 때 호출이 됩니다. 그러니 useEffect 내에서 originPostList 값이 undefined가 아닐때 setPostList를 호출할 수 있도록 방어적으로 코드를 작성해주시는 것이 좋습니다. Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러가 발생하신다면, 해당 객체에서 지원하지 않는 속성명을 참조하여 undefined를 읽어왔고 그 undefined에 대해서 .map 을 수행했기에 발생하는 오류입니다. 그 당시의 postList 정확한 값을 확인해보셔야 합니다. 예상하신 것과는 다른 형태의 객체이실 수도 있습니다. postList라고 한다면 Array 형태를 예상하셨을 수 있는 데, Array에 "results"로 참조하는 것은 있을 수 없는 속성 참조일 수 있습니다. postList가 Array가 아닌 object일까요? 정확한 확인을 위해 PostList 컴포넌트에서 return 에서 results 코드를 모두 제거하고, 아래의 코드로 postList 객체의 값을 화면에 그대로 찍어보면 어떤 값이 나오나요? {JSON.stringify(postList)} 확인해보시고, 댓글 부탁드립니다. 화이팅입니다. :-)