React 오류 메시지 - exhaustive-deps-warning

useEffect 에서 dependency 문제

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps

useEffect(() => {
	// selectedKeyword 가 변할 때 마다 props.onClick 실행해 App에 배열을 넘김
    props.onClick(selectedKeyword);
}, [selectedKeyword]);

selectedKeyword 배열이 변화할 때 마다 props를 통해 상위 컴포넌트인 App에 전달하는 코드를 작성했는데 위와 같은 오류메시지가 떴다.

 

useEffect 내에 사용하고 있는 state를 두 번째 변수(deps)에 포함시켜 달라는 메시지이다.

오류메시지에서는 'props'를 넣어달라고 이야기하고있으니 아래와 같이 수정하면 된다.

useEffect(() => {
	// selectedKeyword 가 변할 때 마다 props.onClick 실행해 App에 배열을 넘김
    props.onClick(selectedKeyword);
}, [selectedKeyword, props]);

 

 

참고한 사이트

https://kyounghwan01.github.io/blog/React/exhaustive-deps-warning/#_1-useeffect%E1%84%82%E1%85%A2-state%E1%84%85%E1%85%B3%E1%86%AF-%E1%84%82%E1%85%A5%E1%87%82%E1%84%8B%E1%85%A5%E1%84%8C%E1%85%AE%E1%86%B7

React.js - exhaustive-deps-warning, react, react-hook