[Error] "Maximum update depth exceeded." 해결

프로젝트를 하던 와중에,

 

이런 에러가 발생했다.

 

구글링해보니 useEffect 관련 오류라서 오류 해결한 걸 남겨보려고 한다.

 

 

useState() 는 비동기로 상태값을 변경하기 때문에 렌더링 시점에서 상태가 개발자의 의도대로 업데이트 되지 않은 상태일 수도 있다. 그래서 나는 useEffect를 이용해 특정 값이 바뀔때마다 무적권 해당 콜백함수가 실행되도록 하게 했는데, 그렇게 하다보니 저 에러가 발생한 것이었다.

 

무한 루프의 warning...

 

이걸 해결하는 방법은 두 가지가 있다.

 

1. useEffect 안으로 해당 무한 렌더링 되는 함수를 아예 집어 넣기

2. useCallback 함수를 이용해서 특정 값이 변화하지 않을 때는 이전 값을 재활용해서 쓰도록 하기

 

 

이 두 가지가 있는데, 나는 첫 번째 방법으로 오류를 해결하였다.

 

 

 

 

이전 코드

 

  useEffect(() => {
    selected();
  }, [selectedType, studyData]);
  
  const selected = () => {
  	let filtered;
    if (selectedType === "전체") {
      filtered = studyData;
    } else if (selectedType === "프론트엔드") {
      filtered = studyData.filter((study) => study.category === "FRONT");
    } else if (selectedType === "백엔드") {
      filtered = studyData.filter((study) => study.category === "BACK");
    }
    setFilteredData(filtered);
}

  useEffect(() => {
    paginate(1);
  }, [filteredData]);

 

까먹고 해결 전 코드를 적어놓지 않아서 최대한 비슷하게 적어본다.

함수로 따로 전체/프론트엔드/백엔드 구별하는 함수를 만들어두고 useEffect에서 렌더링되도록 했는데 무한 루프 발생.

그래서 그 함수를 아예 useEffect 안에 넣어버렸다.

 

 

 

 

해결한 코드

  useEffect(() => {
    let filtered;
    if (selectedType === "전체") {
      filtered = studyData;
    } else if (selectedType === "프론트엔드") {
      filtered = studyData.filter((study) => study.category === "FRONT");
    } else if (selectedType === "백엔드") {
      filtered = studyData.filter((study) => study.category === "BACK");
    }
    setFilteredData(filtered);
  }, [selectedType, studyData]);

  useEffect(() => {
    paginate(1);
  }, [filteredData]);

 

이렇게 useEffect 안에 넣어주었더니 해결 완료.

 

무사히 리스트들을 category별로 구별할 수 있게 되었다.

 

 

 

 

 

 

 

---

 

참고했던 블로그 :https://sambalim.tistory.com/152?category=923123

useEffect 이해하기