useEffect — 렌더링 바깥의 일을 다루기

리액트 컴포넌트의 본업은 딱 하나예요. props와 state를 받아서 화면(JSX)을 그려서 돌려주는 것. 그런데 실제 앱은 화면만 그려선 안 되죠. 서버에서 데이터를 가져오고, 타이머를 켜고, 이벤트를 구독하고 같은 일도 해야 해요. 이렇게 렌더링 결과와는 직접 상관없지만 컴포넌트가 해야 하는 "바깥 일"을 부수 효과(side effect)라고 불러요.

useEffect는 두 개의 인자를 받아요. 첫 번째는 실행할 함수(이펙트 함수), 두 번째는 의존성 배열이에요.

useEffect(() => {
  // 여기에 실행할 부수 효과를 적어요
  console.log("화면이 그려진 뒤 실행돼요!");
}, [의존성]);

실제로 자주 보는 예시예요. 컴포넌트가 처음 나타났을 때 데이터를 한 번 가져오는 흔한 패턴이죠.

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 화면이 그려진 뒤, 서버에서 목록을 가져와요
    fetch("/api/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []); // ← 처음 한 번만

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

이펙트가 얼마나 자주 실행되는지는 전적으로 의존성 배열이 결정해요. 세 가지 경우를 확실히 구분해 두면 됩니다.

// count가 바뀔 때마다 문서 제목을 갱신
useEffect(() => {
  document.title = `클릭 ${count}번`;
}, [count]); // ← count가 의존성

타이머를 켜거나 이벤트를 구독하면, 컴포넌트가 사라질 때 그걸 정리(해제)해야 해요. 안 그러면 이미 없어진 컴포넌트를 위해 타이머가 계속 돌거나, 구독이 쌓여서 메모리 누수·버그가 생겨요. 리액트는 이걸 위해 이펙트 함수가 return하는 함수를 정리(cleanup) 함수로 써요.

useEffect(() => {
  // 부수 효과 시작: 1초마다 실행되는 타이머
  const id = setInterval(() => {
    console.log("똑딱");
  }, 1000);

  // ↓ return한 함수가 "정리 함수"예요
  return () => {
    clearInterval(id); // 타이머 해제
  };
}, []);

이펙트 안에서 state를 바꾸는데, 그 이펙트의 의존성에 매 렌더마다 새로 만들어지는 값이 들어 있으면 무한 루프가 돌아요. 이펙트 실행 → state 변경 → 리렌더 → 의존성이 또 "달라졌다"고 판단 → 이펙트 재실행 → ... 이 고리가 끝나지 않는 거예요.

// ❌ 무한 루프! options는 매 렌더마다 새 객체
function Bad() {
  const [n, setN] = useState(0);
  const options = { step: 1 }; // 매번 새로 생김

  useEffect(() => {
    setN((v) => v + options.step); // state 변경 → 리렌더
  }, [options]); // options가 매번 "달라져" 다시 실행 → 무한 반복
}