EFFECT CLEANUP

useEffect는 외부 시스템 동기화와 cleanup을 함께 설계한다

의존성 배열은 이펙트가 어떤 props와 state 변화에 반응할지 정하고, return 함수는 타이머, 구독, 요청 같은 외부 작업을 해제합니다.

의존성 배열 모드

Deps

deps 생략 커밋 뒤 매 렌더마다 실행됩니다. 조건 없는 setState는 재렌더 루프를 만들 수 있습니다.

[] 마운트 후 한 번 실행됩니다. 개발 StrictMode에서는 setup-cleanup 검사용 재실행이 보일 수 있습니다.

[roomId] deps가 Object.is 비교로 달라지면 이전 cleanup을 먼저 실행한 뒤 새 이펙트를 설정합니다.

return cleanup clearInterval, removeEventListener, AbortController.abort처럼 남은 외부 작업을 해제합니다.

Deps audit

1. 외부 시스템 React state 계산만 있다면 Effect가 아니라 렌더 중 계산이나 이벤트 핸들러로 옮길 수 있습니다.

2. exhaustive-deps lint 경고가 가리키는 reactive value를 넣고, 불필요한 함수는 Effect 안으로 옮겨 deps를 줄입니다.

3. 멱등 cleanup 다음 실행 전과 언마운트 때 모두 호출되어도 안전하도록 해제 로직을 중복 호출에 견디게 만듭니다.