인프런 커뮤니티 질문&답변
작성한 질문수
React Hook useMemo has a missing dependency
작성
·
851
0
강사님 강사님의 강의를 들으며 진행하고 있는데 아래와 같은 경고 메시지가 계속 나와 경고 메시지를 받지 않으려면 어떻게 코드를 작성해야 하는지 궁금해서 질문 드립니다!
아래는 제가 작성한 코드입니다
https://codesandbox.io/s/youthful-glitter-6thymf?file=/src/App.js:0-2523
Line 54:8: React Hook useMemo has a missing dependency: 'data'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 58:51: React Hook useMemo has missing dependencies: 'addDiary', 'deleteDiary', and 'editDiary'. Either include them or remove the dependency array react-hooks/exhaustive-deps
답변 1
2
안녕하세요 이정환입니다.
해당 경고 메세지는 오류는 아니므로 동작에 영향을 미치지 않아 걱정하지 않으셔도 됩니다.
또 해당 경고 메세지는 리액트 개발중 어쩔 수 없이 계속 마주치게 되는 경고 메세지라서
그냥 무시하시고 진행하셔도 됩니다.
해당 경고 메세지들이 발생하는 이유에 대해서 설명해드리자면
먼저 두 메세지 모두 "Missing Dependency" 라는 경고 메세지인데요
쉽게 말하면 useMemo나 useCallback 처럼 deps(의존성 배열)을 인수로 받는 훅의 경우 첫번째 인수로 전달한 콜백함수에서 두번째 인수로 전달한 deps 배열에 넣지 않은 값을 사용하려고 하면 발생하게 됩니다.
예를 들어 App.js의 getDiaryAnalysis 함수를 보면 첫번째 인수로 전달한 콜백함수에서 data라는 변수를 사용하고 있지만 두번째 인수로 전달한 deps에는 data가 아닌 data.length만 전달하고 있습니다.
이렇게 될 경우 data의 값이 변경되어도 data.length가 변경되지 않는다면 콜백함수 내부에서는 이 변경된 값을 감지할 수 없게 되는데요 리액트에서는 이를 혹시 개발자가 까먹은게 아닌지 알려주기 위해 "Missing Dependency"라는 경고 메세지를 발생시키기 됩니다.
그러나 우리는 의도적으로 이렇게 설정해 둔 것입니다. data의 값이 변화할 때 마다 해당 함수를 다시 계산하는게 아니라 data.length가 변경될 때에만 해당 함수를 다시 계산시키고자 하는 것 이기 때문에 해당 경고 메세지는 그냥 무시하시고 지나가셔도 괜찮습빈다.