커서 이펙트에서 3일 날렸다
컴포넌트 계속 리렌더링되는 이유를 못 찾아서 밤새 디버깅했는데, 알고 보니 의존성 배열에 객체 넣어둔 거였음...
진짜 허탈하다. 그래도 하나 배웠지 뭐.
8 개의 답변
ㅇㅈ 나도 이거 매번 당함ㅋㅋ 의존성 배열에 객체 넣는 순간 운명이 갈림
글쎄 그건 좀... 요즘 eslint exhaustive-deps 켜놓으면 커밋 전에 다 잡아주는데 3일이나 태웠다는 게 이해가 안 감. 린트 끄고 개발하는 사람 얘기임?
아 이거 진짜 공감된다. 나는 작년에 커서 따라오는 툴팁 만들다가 똑같이 밤샜음. 옵션 객체를 그대로 deps에 넣어놨는데 부모가 리렌더될 때마다 새 참조가 생기니까 무한루프 돌더라. React.memo로 감싸도 소용 없었고. 결국 useEffect 안에서 원시값만 꺼내 쓰고 객체는 useRef나 useMemo로 고정했더니 해결됐어. 이거 한 번 겪으면 평생 안 까먹음 ㅋㅋ
이거 맞음ㅋㅋ 그리고 의존성 배열 문제는 십중팔구 객체/함수 참조 때문임. 값이 같아도 참조가 다르면 React는 다른 걸로 봄
3일은 좀 심한데 디버깅 툴은 뭐 썼어? React DevTools Profiler 돌려서 어떤 props 때문에 리렌더되는지 보면 30분이면 잡히는 케이스 같음. 다음엔 그거부터 켜봐
출처 있음?
동의 안 됨. 의존성 배열 문제면 콘솔에 리렌더 로그 찍어보는 순간 바로 나옴. 솔직히 컴포넌트 구조 자체가 복잡해서 못 찾은 거지 객체 참조가 원흉은 아니었다고 봄. 근본 원인 다시 점검해보는 게 좋을 듯
와 나도 며칠 전에 똑같은 거로 반나절 날렸는데... useMemo 감싸니까 바로 사라지더라. 반가워서 댓글 남김 ㅠㅠ