Builder.shin

React Hooks useEffect 의존성 배열 제대로 이해하기

문제 상황

회원 정보 수정 페이지에서 사용자 데이터를 불러오는 로직을 useEffect로 작성했는데, 프로필 이미지를 변경해도 화면이 갱신되지 않는 버그가 발생했다.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(data => setUser(data));
  }, []); // 문제의 빈 배열

  return <div>{user?.name}</div>;
}

원인

의존성 배열을 빈 배열로 두면 컴포넌트 마운트 시 한 번만 실행된다. userId가 변경되어도 effect가 재실행되지 않아 이전 사용자 정보가 계속 표시됐다.

해결

useEffect(() => {
  fetchUser(userId).then(data => setUser(data));
}, [userId]); // userId 변경 시 재실행

의존성 배열 패턴 정리

  1. 배열 없음: 매 렌더링마다 실행 (거의 사용 안 함)
  2. 빈 배열 []: 마운트 시 1회만 실행 (초기 데이터 로딩)
  3. 값 포함 [dep1, dep2]: 해당 값 변경 시 실행

추가로 배운 것

eslint-plugin-react-hooks를 적용하니 누락된 의존성을 경고해줬다. Hooks 프로젝트라면 필수로 설정해야겠다.

{
  "extends": ["react-app"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

클래스 컴포넌트의 componentDidMount/Update 패턴에 익숙해서 Hooks의 의존성 개념이 처음엔 헷갈렸지만, 선언적으로 "어떤 값이 바뀌면 이 effect를 다시 실행한다"고 명시하는 방식이 더 직관적이라는 걸 느꼈다.

React Hooks useEffect 의존성 배열 제대로 이해하기