React Hook useEffect has a missing dependency: 'xxx'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps) 해결하기

API로 서버에서 데이터를 받아오기 위해 react-hook 중 useEffect를 사용했습니다.

여러 개의 데이터를 받아와서 여러 개의 데이터를 setState를 해야 했습니다.

그런데 일부 useEffect 외부에서 선언된 데이터를 사용하여 axios.get을 해야 하는 경우, 해당 컴포넌트 호출시 바로 렌더링 되지 않고, 새로고침을 한번 더 해야 랜더링 되는 문제가 발생했습니다.

처음에는 이런 문제점을 파악하지 못하고 그냥 서버 속도가 느린 줄만 알았습니다 ㅠㅠ

그러다 콘솔 에러들을 해결하던 중 exhaustive-deps 문제를 해결하니 위 문제가 해결됐습니다. 

아래 블로그를 참고하였는데 이 블로그에서는 이 문제를 해결할 수 있는 방법으로 2가지를 제시하는데 제 문제는 이 중 1번 해결 방법을 통해 해결할 수 있었습니다.   

React.js - exhaustive-deps-warning

---

 

exhaustive-deps 해결하기

---

• useEffect내에 state 추가하기 

const fileId = fileList[fileIndex].id;
const [fileName, setFileName] = React.useState("");
const [filePage, setFilePage] = React.useState(0);
const [imageList, setImageList] = React.useState([]);

useEffect(() => { 
        let pageNum = 0;
        let tempImageList = [];
        
        async function get() {
            while (pageNum < filePage) {
                await axios.get(url + '/' + pageNum)
                    .then((res) => {
                        tempImageList.push(res.data.image);
                    })
                    .catch((err) => console.log(err));
                pageNum += 1;
            }
            setImageList(tempImageList);
        }
        get();
}, [fileId, filePage, url]);

 

위 코드에서 useEffect 내부에서 fileId, filePage, url이라는 변수를 사용하고 있는데 이 변수들은 useEffect 외부에서 선언됩니다.

이럴 경우 useEffect 내부 코드가 실행되어 필요한 값들이 setState된 이후에 외부에서 선언된 변수들이 대시 호출되지 않는 문제가 발생하여 해당 state들을 사용할 수 없습니다. 그래서 위  while 문 내부 코드가 페이지 랜더링 후 바로 실행되지 않았던 것 같습니다. 

이 문제는 useEffect의 두번째 파라미터의 배열에 의존값들을 넣어주어 해결할 수 있습니다.