본문 바로가기

Web Dev/react.js

React Hook useEffect has a missing dependency: 'params.postNum'. Either include it or remove the dependency array react-hooks/exhaustive-deps 해당 경고가 의미하는 바가 무엇일까 ?

반응형

해당 에러는 React의 useEffect 훅에서 누락된 의존성(dependency)인 'params.postNum'을 갖고 있음을 나타냅니다. useEffect 훅은 컴포넌트의 렌더링 이후에 특정 동작을 수행하기 위해 사용됩니다. 의존성 배열(dependency array)을 통해 useEffect가 어떤 상태나 프롭스에 의존하고 있는지를 명시해야 합니다.

React는 useEffect 훅이 의존하는 값이 변경될 때마다 트리거되는데, 의존성 배열이 누락되면 React는 해당 훅이 항상 최신의 값에 대해 동작한다고 가정하지 않습니다. 따라서 의존성 배열에 'params.postNum'을 포함시키거나, 의존성 배열 자체를 제거하여 이 경고를 해결할 수 있습니다.

다음은 'params.postNum'을 의존성 배열에 포함시키는 예시입니다:

useEffect(() => {
  // 특정 동작 수행
}, [params.postNum]);

위와 같이 의존성 배열을 작성하면, 'params.postNum'이 변경될 때만 useEffect 훅이 실행됩니다. 만약 'params.postNum'이 변경되지 않아도 동작을 실행하려면, 의존성 배열을 비워두면 됩니다:

useEffect(() => {
  // 특정 동작 수행
}, []);

의존성 배열을 비워두면 useEffect 훅은 컴포넌트가 처음 렌더링될 때만 실행되고, 그 후에는 다시 실행되지 않습니다. 이러한 선택은 개발자의 의도에 따라 다를 수 있습니다.

반응형