😇 이 글은 useEffect를 사용하던 중 무한 루프에 빠져 골머리를 싸매며 괴로워 하던 사람이 한 블로그의 글을 보고 감명 받아 번역해 게시한 것임을 알려드립니다.
레스 기릿-

왜 useEffect를 사용할까?

---

React의 useEffect Hook은 앱의 부작용(side effects)을 해결할 수 있게 해준다.

• useEffect Hook을 사용하면 다음과 같은 몇몇 기능을 가능하게 한다.

  - 네트워크에서 데이터 가져 오기
  첫 번째 마운트에서 데이터 가져와 채우기
  - UI 조작
  버튼 클릭 시 이벤트에 응답하기 (예: 메뉴 열기)
  - 타이머 설정 또는 종료
  특정 변수가 미리 정의된 값에 도달하면 내장된 타이머가 중지되게 하거나 시작되게 하기

UseEffect Hook을 사용하는 것은 React 생태계에서 일반적이지만 마스터하는 데는 시간이 필요하다. 이 때문에 많은 초보 개발자는 무한 루프 문제를 일으키는 방식으로 useEffect 함수를 구성한다. 악명 높은 무한 루프와 그것을 해결하는 방법에 대해 배워보자.

📚 오늘 배울 내용은 다음과 같다.

무한 루프의 원인과 해결 방법

• 종속성 배열에 종속성을 전달하지 않을 경우
• 함수를 종속성으로 사용할 경우
• 배열을 종속성으로 사용할 경우
• 객체를 종속성으로 사용할 경우
• 잘못된 종속성을 전달할 경우

무한 루프의 원인 및 해결 방법

---

1. 종속성 배열에 종속성을 전달하지 않을 경우

useEffect 함수에 종속성이 없으면 무한 루프가 발생한다.

예시 코드

function App() {
  const [count, setCount] = useState(0); //초기값은 0.
  useEffect(() => {
    setCount((count) => count + 1); //이 Hook을 증가시킨다.
  }); //디펜던시 어레이(종속성 배열) 없음.
  return (
    <div className="App">
      <p> value of count: {count} </p>
    </div>
  );
}

종속성이 없는 경우 모든 업데이트 주기에 기본적으로 트리거를 사용한다. 결과적으로 여기의 앱은 모든 렌더에 대해 setCount 의 기능을 실행한다. 이것이 무한 루프를 발생시킨다.

이 문제의 원인은 무엇일까?

문제를 단계별로 나누어 보자.

1. 첫 번째 렌더에서 React는 count 값을 확인한다. 여기서 count가 0 이므로 프로그램은 useEffect 함수를 실행한다.
2. 그러고 나서 useEffect는 setCount 메소드를 호출하고 count Hook의 값을 업데이트한다.
3. 그런 다음 React는 UI를 다시 렌더링하여 업데이트된 count 값을 표시한다.
4. UI가 재렌더링 되었기 때문에, useEffect는 모든 렌더 사이클에서 실행되므로 또 다시 setCount 함수를 호출한다. 반복 앤 반복…
5. 위의 단계는 모든 렌더에서 발생하므로 앱이 충돌하게 된다.

이 문제를 해결하는 방법

이 문제를 완화하려면 종속성 배열을 사용해야 한다. 특정 값이 업데이트되는 경우에만 React에서 useEffect를 호출하도록 지시하면 된다.

다음 단계로 다음과 같은 종속성으로 빈 배열을 추가하면 된다.

변경한 코드

useEffect(() => {
  setCount((count) => count + 1);
}, []); //두 번째 인수로 빈 배열을 준다.

두 번째 인수로 빈 배열을 주면, React는 첫 번째 마운트에서만 setCount 함수를 실행한다.

2. 함수를 종속성으로 사용할 경우

메서드를 useEffect 종속성 배열에 전달하면 React는 무한 루프가 있음을 나타내는 오류를 발생시킨다.

예시 코드

function App() {
  const [count, setCount] = useState(0);

  function logResult() {
    return 2 + 2;
  }
  useEffect(() => {
    setCount((count) => count + 1);
  }, [logResult]); //디펜던시로 logResult 함수를 설정했다.
  return (
    <div className="App">
      <p> value of count: {count} </p> {/*count의 값 보여줌*/}
    </div>
  );
}

이 snippet에서는 logResult 메서드를 useEffect의 종속성 배열에 전달했다.
따라서 이론적으로는, React가 첫 번째 렌더에서만 count 값을 증가시킬 것이라고 예상된다.

하지만! 이런 오류가 뜨게 된다.

⚠️ 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 안에 있는 setState를 호출하지만 useEffect에 종속성 배열이 없거나 모든 렌더에서 종속성 중 하나가 변경된 경우에 발생할 수 있습니다.

이 문제의 원인은 무엇일까?

1. 한 가지 기억해야 할 점은 useEffect는 얕은 비교(shallow comparison)라는 개념을 사용한다는 것이다. 디펜던시가 업데이트되었는지 확인하기 위해 이 작업을 수행한다.
2. 여기서 문제는 각 렌더 동안 React가 logResult의 참조를 재정의한다는 것이다.
3. 따라서 각 사이클마다 useEffect 함수가 다시 트리거된다.
4. 따라서 React는 앱에서 Update Depth 오류가 발생할 때까지 setCount Hook을 호출한다. 이것은 프로그램에 버그와 불안정성을 가져온다.

이 문제를 해결하는 방법

한 가지 해결책은 useCallback Hook을 사용하는 것이다. 이를 통해 개발자는 자신의 함수를 메모할 수 있으며, 이를 통해 참조 값이 동일하게 유지된다. React는 안정적인 참조 값으로 인해 UI를 무한히 다시 렌더링하지 않아야 한다.

변경한 코드

const logResult = useCallback(() => {
  return 2 + 2;
}, []); //이제 logResult가 메모된다.
useEffect(()=> {
  setCount((count)=> count+1);
},[logResult]); //logResult 참조가 동일하게 유지되므로 무한 루프 오류가 없어진다.

3. 배열을 종속성으로 사용할 경우

배열 변수를 종속성으로 전달하면 무한 루프가 실행된다.

예시 코드

const [count, setCount] = useState(0); //초기 값은 0.
const myArray = ["one", "two", "three"];

useEffect(() => {
  setCount((count) => count + 1); //이전처럼 Count 값을 증가시킨다.
}, [myArray]); //배열 변수를 디펜던시로 전달

종속성 인수로 배열인 myArray 변수를 전달했다.

이 문제의 원인은 무엇일까?

myArray의 값은 변하지 않았는데 왜 코드가 useEffect를 여러 번 트리거할까?

1. React는 디펜던시의 참조가 변경되었는지 확인하기 위해 얕은 비교를 사용한다는 점을 기억하자.
2. myArray에 대한 참조가 각 렌더에서 계속 변경되므로 useEffect는 setCount 콜백을 트리거한다.
3. 따라서 myArray의 불안정한 참조 값으로 인해 React는 모든 렌더 사이클에서 useEffect를 호출한다. 결국 이로 인해 앱이 중단된다.

이 문제를 해결하는 방법

이 문제를 해결하기 위해, 우리는 useRef Hook을 사용할 수 있다. 이렇게하면 참조가 변경되지 않도록 변경 가능한 객체가 반환된다.

변경한 코드

const [count, setCount] = useState(0);

//'current' 속성을 추출하고 값을 할당한다.
const { current: myArray } = useRef(["one", "two", "three"]);

useEffect(() => {
  setCount((count) => count + 1);
}, [myArray]); //참조 값이 안정적이어서 무한 루프가 발생하지 않는다.

4. 객체(Object)를 종속성으로 사용할 경우

useEffec의 종속성 배열에서 객체를 넣으면 무한 루프 문제가 발생한다.

예시 코드

const [count, setCount] = useState(0);
const person = { name: "Rue", age: 17 }; //객체 생성
useEffect(() => {
  //매번 count 값을 증가시킴 
  //person'의 값을 변경함
  setCount((count) => count + 1);
}, [person]); //종속 배열은 객체를 인수로 포함함
return (
  <div className="App">
    <p> Value of {count} </p>
  </div>
);

콘솔의 결과는 프로그램이 무한 반복됨을 알려준다.

The 'person' object makes the dependencies of useEffect Hook change on every render. Move it inside the useEffect callback. Alternatively, wrap the initialization of 'person' in its own useMemo() Hook.
'person' 객체는 모든 렌더에서 useEffect Hook의 디펜던시를 변경합니다. 'person'객체를 useEffect 콜백 안으로 이동하세요. 또는 'person'객체의 초기화를 자체 useMemo() Hook으로 래핑하세요.

이 문제의 원인은 무엇일까?

1. React는 이전과 마찬가지로 얕은 비교를 통해 person의 참조 값이 변경되었는지 확인한다.
2. 렌더링할 때마다 person 객체의 참조 값이 변경되므로 React는 useEffect를 다시 실행한다.
3. 따라서 모든 업데이트 주기마다 setCount가 호출된다. 그래서 무한 루프가 발생한다.

이 문제를 해결하는 방법

useMemo를 사용하면 된다. 이 Hook은 디펜던시가 변경될 때 메모된 값을 계산한다. 그리고 메모된 변수가 있기 때문에 각 렌더링 중에 상태의 참조 값이 변경되지 않도록해준다.

변경한 코드

//useMemo를 사용하여 객체 생성
const person = useMemo(
  () => ({ name: "Rue", age: 17 }),
  [] //디펜던시가 없으므로 값이 변경되지 않는다. 즉, useEffect에서 person객체를 디펜던시로 사용해도 참조값이 변경되지 않기 때문에 유지가 된다는 뜻이다.
);
useEffect(() => {
  setCount((count) => count + 1);
}, [person]);

5. 잘못된 디펜던시를 전달할 경우

useEffect 함수에 잘못된 변수를 전달하면 React가 오류를 발생시킨다.

예시 코드

const [count, setCount] = useState(0);

useEffect(() => {
  setCount((count) => count + 1);
}, [count]); //종속성 배열에 count 전달함

return (
  <div className="App">
    <button onClick={() => setCount((count) => count + 1)}>+</button>
    <p> Value of count{count} </p>
  </div>
);

이 문제의 원인은 무엇일까?

1. 위 코드에 useEffect 메소드 내에서 카운트 값을 업데이트하라고 적어두었다.
2. 그에 더해, count Hook을 의존성 배열에도 전달해 두었다.
3. 즉, count 값이 업데이트 될 때마다, React가 useEffect를 호출한다.
4. 결과적으로 useEffect Hook은 setCount를 호출하므로 count를 다시 업데이트한다.
5. 이 때문에 React는 무한 루프에 빠진다.

이 문제를 해결하는 방법

무한 루프를 제거하려면 다음과 같이 빈 종속성 배열을 사용하면 된다.

변경한 코드

const [count, setCount] = useState(0);

//컴포넌트가 처음 마운트될 때만 'count' 값을 업데이트한다.
useEffect(() => {
  setCount((count) => count + 1);
}, []);

이렇게 하면 첫 번째 렌더에서만 useEffect가 실행된다.

결론

---

React Hooks는 쉬운 개념이지만 프로젝트에 통합 할 때 기억해야 할 많은 규칙이 있다. 이렇게해야 앱이 안정적(stable)으로 유지되고 최적화(optimized)되며 프로덕션 중에 오류가 발생하지 않는다.

또한 최근 릴리스된 Create React App CLI는 런타임 중에 무한 루프 오류를 감지하고 보고한다. 이를 통해 개발자는 이러한 문제를 프로덕션 서버로 전환하기 전에 발견하고 완화할 수 있다.

📚 참고: How to solve the React useEffect Hook’s infinite loop patterns | Hussain Arif