useEffect란 무엇이며 언제 실행되나요?

Question

Accepted Answer

`useEffect`는 **side effect**를 실행합니다 — 데이터 페칭, 구독, 타이머, 수동 DOM 업데이트처럼 React의 렌더링 바깥에 도달하는 작업입니다. 컴포넌트가 render된 **후에** 실행되어 side effect를 render 본문 바깥에 유지합니다(render는 순수해야 합니다).

## 의존성 배열이 타이밍을 제어합니다

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← 의존성 배열
```

- **`[count]`** → 첫 render 후, 그리고 `count`가 변경될 때마다 실행됩니다.
- **`[]`** (빈 배열) → mount 후 **한 번** 실행됩니다(일회성 설정에 적합).
- **생략** → **매** render 후 실행됩니다(원하는 경우는 드뭅니다).

## 정리(cleanup): 함수를 반환하기

effect가 정리해야 할 무언가를 설정한다면 cleanup 함수를 반환하세요. React는 다음 effect 실행 전과 컴포넌트가 unmount될 때 이를 호출합니다:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → 타이머 누수 방지
}, []);
```

## 왜 cleanup이 중요한가

cleanup이 없으면 재실행될 때마다 또 다른 타이머/구독이 추가되고 이전 것을 절대 제거하지 않습니다 — 전형적인 메모리 누수입니다. `[dep]` effect의 생명주기는 다음과 같습니다: *effect 실행 → (dep 변경) → cleanup 실행 → effect 다시 실행*.

**팁:** render 중에 계산할 수 있는 것에는 effect를 사용하지 말고(대신 값을 파생하세요), effect가 읽는 모든 값을 의존성 배열에 포함하세요(`react-hooks/exhaustive-deps` 린트 규칙이 도움이 됩니다).