React Hook useEffect has a missing dependency 해결

 

과제 전형 진행하던 와중에 저런 문구가 나왔다.

useEffect에 나온 경고 문구였고 실행하는데는 문제가 없지만 이상하게 거슬려서(?) 구글에 그대로 쳐보았고, 역시나 같은 경고문을 받은 사람들의 글들이 나왔다.

 

 

 

 

원인

' useEffect 내부에서 실행된 함수 ' 에서 사용되는 변수를 useEffect의 배열안에 넣어주지 않았기 때문에 발생한다고 한다. 경고문이 나온 코드에서는 useEffect 안의 함수를 따로 바깥으로 빼내서 작성하고 그 함수만 넣어주었는데, 그래서 이 경고문이 나오지 않았나 싶다.

 

 

 

 

 

 

 

해결 방법

함수의 선언을 useEffect 내부로 옮겼고, 함수에서 사용되는 변수를 [] 안에 넣었더니 바로 오류가 해결되었다.

 

 

 

다른 방법도 있다.

바로 useCallback()을 사용하는 방법이다.

 

이 방법은 아래 블로그에 설명되어 있다.

https://kyounghwan01.github.io/blog/React/exhaustive-deps-warning/#_2-useeffect-%E1%84%82%E1%85%A2%E1%84%87%E1%85%AE%E1%84%8B%E1%85%A6-%E1%84%92%E1%85%A1%E1%86%B7%E1%84%89%E1%85%AE%E1%84%85%E1%85%B3%E1%86%AF-%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%8B%E1%85%B4%E1%84%92%E1%85%A1%E1%86%AB-%E1%84%80%E1%85%A7%E1%86%BC%E1%84%8B%E1%85%AE

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

 

useCallback이 없을 땐 리렌더링을 할 때마다 함수를 새롭게 만들고, 새롭게 실행되었던 것에 반해, useCallback을 사용하므로써 fetchUrl이 변화될 때만 함수가 실행되어 불필요한 함수의 생성 및 실행을 막을 수 있다고 한다.

 

useCallback에 대해 강의에서 들어보기만 하고 실제로 저굥한 적은 없는데 이렇게 경고문 하나로 알게 되어 신기하기도 하다. 나중에 이 경고가 다시 뜨면 그 때는 useCallback을 적용해봐야겠다.