[React/오류] Warning: Maximum update depth exceeded.

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

useEffect를 사용하던 중 아주 어마무시한 오류가 났다. 콘솔창을 보지 않고 테스트하던 중이었는데 노트북이 렉 걸리기 시작하고 뜨거워지는게 느껴졌다. 그래서 혹시나 하고 콘솔창을 열어보니 무한 렌더링이 되고 있었다.

const [totalPage, setTotalPage] = useState([]);

useEffect(() => {
    if (data) {
        // calculate the total number of pages
        const newTotalPage = [];
        for (let i = 1; i <= Math.ceil(data.totalResults / pagePerLimit); i++) {
            newTotalPage.push(i);
        }
        setTotalPage(newTotalPage);
        // divide per limitPage
        const newSlicePages = [];
        for (let i = 0; i < totalPage.length; i += pageArrayLimit) {
            newSlicePages.push(totalPage.slice(i, i + pageArrayLimit));
        }
        setSlicePages(newSlicePages);
    }
}, [data, totalPage]);

React Hook useEffect has a missing dependency: 'totalPage'. Either include it or remove the dependency array

계속 이런 의존성 배열에 추가하라는 경고가 뜨길래 거슬려서 totalPage를 dependency array에 추가했더니 이 사태가 나버렸다.
왜인가보니 totalPage가 바뀌었을 때 저 useEffect가 실행될건데, 그 실행되는 코드들 안에서 다시 setTotalPage를 해주니 무한 반복될 수밖에 없었다. 그래서 dependency array에서 totalPage를 지웠다.
 
이를 해결하기 위해 useCallback을 사용하는 방법이 있다.
useCallback는 함수를 재사용 하기 위해 사용하는 훅이다. useCallback을 사용하면 의존성 배열에 있는 인자의 값이 업데이트 되지 않는 한 컴포넌트 안의 함수는 다시 만들어지지 않는다.
아래와 같이 수정해줬다.

const calTotalPage = useCallback(() => {
    if (data) {
        // calculate the total number of pages
        const newTotalPage = [];
        for (let i = 1; i <= Math.ceil(data.totalResults / pagePerLimit); i++) {
            newTotalPage.push(i);
        }
        setTotalPage(newTotalPage);
        // divide per limitPage
        const newSlicePages = [];
        for (let i = 0; i < totalPage.length; i += pageArrayLimit) {
            newSlicePages.push(totalPage.slice(i, i + pageArrayLimit));
        }
        setSlicePages(newSlicePages);
    }
}, [])

useEffect(() => {
    calTotalPage()
}, [data, calTotalPage]);

하지만 여전히 같은 경고가 떴다. 대체 어떻게 해야 없어질까.
 

참고 자료
https://muna76.tistory.com/243
https://sambalim.tistory.com/152?category=923123