React Hook useEffect has a missing dependency 완벽 해결법

도입: React Hook useEffect has a missing dependency 에러란?

React 개발 중 “React Hook useEffect has a missing dependency” 경고를 만나본 적이 있으신가요? 이 경고는 React 개발자라면 누구나 한 번쯤 마주치는 흔한 문제입니다. useEffect 훅 내부에서 사용하는 변수나 함수를 의존성 배열(dependency array)에 포함시키지 않았을 때 발생합니다. ESLint의 exhaustive-deps 규칙이 이를 감지하여 경고를 띄우는데, 단순한 경고처럼 보이지만 무시하면 예상치 못한 버그와 상태 불일치 문제를 초래할 수 있습니다. 이 글에서는 이 에러의 원인부터 해결방법, 그리고 예방법까지 완벽하게 다뤄보겠습니다.

에러 상세 분석

이 경고 메시지는 React의 Hook 규칙을 준수하도록 돕는 eslint-plugin-react-hooks 플러그인에서 발생합니다. useEffect 훅은 컴포넌트의 사이드 이펙트를 처리하는 중요한 역할을 하며, 의존성 배열을 통해 언제 이펙트를 재실행할지 결정합니다. 문제는 useEffect 내부에서 참조하는 props, state, 또는 함수가 의존성 배열에 누락되면 클로저(closure) 특성상 오래된 값을 참조하게 되어 stale closure 문제가 발생한다는 것입니다. 예를 들어, 카운터 값이 업데이트되어도 useEffect 내부에서는 여전히 초기값만 참조하는 상황이 발생할 수 있습니다. React 팀은 이러한 버그를 방지하기 위해 의존성 배열을 정확히 명시하도록 강력히 권장하고 있으며, 이는 단순한 코드 스타일의 문제가 아닌 애플리케이션의 정확성과 직결된 중요한 사항입니다.

발생 원인 5가지

1. Props나 State를 의존성 배열에 누락

가장 흔한 원인입니다. useEffect 내부에서 props나 state를 사용하지만 의존성 배열에 포함시키지 않은 경우입니다. 컴포넌트가 리렌더링되어 props나 state가 변경되어도 useEffect는 이를 감지하지 못하고 이전 값을 계속 사용하게 됩니다.

2. 함수를 의존성 배열에 누락

useEffect 내부에서 컴포넌트 내부에 정의된 함수를 호출할 때, 그 함수가 의존성 배열에 없으면 경고가 발생합니다. 함수가 매 렌더링마다 새로 생성되기 때문에 의존성으로 추가해야 합니다.

3. 객체나 배열의 프로퍼티 참조

객체나 배열의 특정 프로퍼티만 사용하더라도 전체 객체를 의존성 배열에 포함시켜야 합니다. 객체의 참조가 변경될 때 useEffect가 재실행되어야 하기 때문입니다.

4. useCallback이나 useMemo로 감싸지 않은 함수

컴포넌트 내부에서 정의한 함수는 매 렌더링마다 새로 생성됩니다. 이를 의존성 배열에 추가하면 무한 루프가 발생할 수 있어, useCallback으로 메모이제이션해야 합니다.

5. Context나 외부 변수 참조

useContext로 가져온 값이나 컴포넌트 외부의 변수를 useEffect 내부에서 사용할 때도 의존성 배열에 포함시켜야 합니다. Context 값이 변경되면 useEffect가 재실행되어야 하기 때문입니다.

해결방법 7가지 (코드 포함)

1. 누락된 의존성 추가하기

가장 기본적인 해결법입니다. ESLint가 제안하는 의존성을 배열에 추가합니다.

// ❌ 잘못된 코드
function Counter({ count }) {
  useEffect(() => {
    console.log(count);
  }, []); // count가 누락됨
}

// ✅ 올바른 코드
function Counter({ count }) {
  useEffect(() => {
    console.log(count);
  }, [count]); // count를 의존성에 추가
}

2. useCallback으로 함수 메모이제이션

함수를 의존성으로 추가할 때 무한 루프를 방지하려면 useCallback을 사용합니다.

// ❌ 잘못된 코드
function Component({ userId }) {
  const fetchData = () => {
    fetch(`/api/user/${userId}`);
  };
  
  useEffect(() => {
    fetchData();
  }, [fetchData]); // 무한 루프 발생 가능
}

// ✅ 올바른 코드
function Component({ userId }) {
  const fetchData = useCallback(() => {
    fetch(`/api/user/${userId}`);
  }, [userId]);
  
  useEffect(() => {
    fetchData();
  }, [fetchData]); // 안전하게 의존성 추가
}

3. 함수를 useEffect 내부로 이동

함수가 useEffect 내부에서만 사용된다면 안으로 이동시켜 의존성 문제를 해결할 수 있습니다.

// ✅ 권장 코드
function Component({ userId }) {
  useEffect(() => {
    const fetchData = () => {
      fetch(`/api/user/${userId}`);
    };
    fetchData();
  }, [userId]); // userId만 의존성에 추가
}

4. 함수형 업데이트 사용

setState에서 이전 상태를 참조할 때는 함수형 업데이트를 사용하면 의존성을 제거할 수 있습니다.

// ❌ 잘못된 코드
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1); // count를 참조
    }, 1000);
    return () => clearInterval(timer);
  }, []); // count가 누락됨
}

// ✅ 올바른 코드
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prev => prev + 1); // 함수형 업데이트
    }, 1000);
    return () => clearInterval(timer);
  }, []); // count 의존성 불필요
}

5. useRef로 최신 값 유지

의존성을 추가하고 싶지 않지만 최신 값을 참조해야 할 때 useRef를 사용합니다.

function Component({ onUpdate }) {
  const onUpdateRef = useRef(onUpdate);
  
  useEffect(() => {
    onUpdateRef.current = onUpdate;
  });
  
  useEffect(() => {
    const timer = setInterval(() => {
      onUpdateRef.current(); // 항상 최신 함수 호출
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 의존성 배열 비어있음
}

6. 객체 구조분해로 필요한 값만 추출

객체 전체가 아닌 필요한 프로퍼티만 의존성에 추가합니다.

// ✅ 올바른 코드
function UserProfile({ user }) {
  const { id, name } = user;
  
  useEffect(() => {
    console.log(id, name);
  }, [id, name]); // 객체가 아닌 원시값 의존성
}

7. eslint-disable 주석 사용 (최후의 수단)

정말 의존성을 추가하면 안 되는 특수한 경우에만 사용합니다.

useEffect(() => {
  // 컴포넌트 마운트 시 한 번만 실행되어야 하는 로직
  initializeApp();
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // 의도적으로 빈 배열 사용

예방법과 베스트 프랙티스

React Hook useEffect has a missing dependency 에러를 예방하려면 몇 가지 베스트 프랙티스를 따라야 합니다. 첫째, ESLint 플러그인(eslint-plugin-react-hooks)을 프로젝트에 설정하여 개발 단계에서 바로 경고를 확인하세요. 둘째, useEffect 내부 로직은 최대한 간단하게 유지하고, 복잡한 함수는 useCallback으로 감싸서 재사용하세요. 셋째, 가능하면 함수를 useEffect 내부로 이동시켜 의존성 관리를 단순화하세요. 넷째, setState를 사용할 때는 함수형 업데이트를 우선 고려하여 불필요한 의존성을 줄이세요. 다섯째, 정말 필요한 경우가 아니라면 eslint-disable 주석 사용을 지양하고, 사용할 경우 반드시 주석으로 이유를 명확히 작성하세요. 이러한 원칙들을 지키면 버그 없는 안정적인 React 애플리케이션을 개발할 수 있습니다.

마무리

React Hook useEffect has a missing dependency 에러는 처음에는 번거롭게 느껴질 수 있지만, 실제로는 애플리케이션의 안정성을 높여주는 중요한 안전장치입니다. 이 글에서 다룬 원인 분석과 7가지 해결방법을 숙지하면, 앞으로 이 에러를 만났을 때 당황하지 않고 적절한 해결책을 선택할 수 있을 것입니다. 의존성 배열을 정확히 관리하는 것은 React의 핵심 원칙 중 하나이며, 이를 올바르게 사용하면 예측 가능하고 유지보수하기 쉬운 코드를 작성할 수 있습니다. 오늘 배운 내용을 실제 프로젝트에 적용해보시기 바랍니다.