오늘도 어김없이 오는 에러 로그 어서오고..😩
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
const [list, setList] = useState();
useEffect(() => {
setList(data);
}, [data]);
useEffect 함수내에서 setState를 사용했고 해당 부분때문에 발생한 무한 루프 현상이다.
useEffect는 컴포넌트가 랜더링 될 때 실행이 되는데 data가 변경되면서 setState가 data를 다시 변경하게 되고...
그러면 다시 useEffect가 실행되고...!
그러니 무한 루프가 발생해버렸다.
해당 코드를 사용했던 이유는 부모 컴포넌트에서 데이터를 받아 오는데 비동기로 받아오다보니 자식 컴포넌트가 랜더링 전 값이 없었을 테고..react는 단방향 바인딩이니... 자식 컴포넌트가 랜더링 할때 data를 undefined를 가지고 있어 이를 감지하여 업데이트 해주기 위해 저 코드가 나왔는데...결론적으로 망한 코드인게지..🙃
저 코드가 나온 것 자체가 나의 코드가 잘 못 된 셈... 부모 컴포넌트에서 data를 정상적으로 받아 온 후 자식 컴포넌트가 랜더링 되도록 수정해주었다.
[참고] 리액트 | Maximum update depth exceeded 에러 해결하기
[참고] 저렇게 사용했던 원인 그리고 답변 😅