USEEFFECT

useEffect 동기화

의존성 배열은 이펙트가 다시 실행될 조건을 정하고, 클린업 함수는 이전 이펙트가 남긴 구독, 타이머, 요청을 정리합니다.

Renderprops와 state로 UI 결과를 계산한다.

Commit브라우저 화면에 DOM 변경이 반영된다.

Effect렌더링 뒤 API 요청, 구독, 타이머 같은 부수 효과가 실행된다.

Cleanup다음 실행 전 또는 언마운트 시 이전 작업을 정리한다.

deps 생략

모든 렌더링 후 실행됩니다. 내부에서 상태를 바꾸면 반복 실행 위험이 커집니다.

[] 빈 배열

마운트 시 한 번 실행합니다. 초기 데이터 로딩이나 초기 구독 설정에 자주 씁니다.

[value] 지정

지정한 값이 바뀔 때만 다시 실행됩니다. 검색어, id, 필터 같은 기준값에 맞습니다.

cleanup 반환

이전 타이머, 이벤트 리스너, 구독을 해제해 중복 실행과 메모리 누수를 줄입니다.

effect 동기화 점검 이펙트에서 읽는 값이 deps에 없으면 오래된 값을 참조할 수 있습니다. 의존성 누락은 버그로 이어지기 쉽습니다.

외부 시스템 동기화 렌더링 중 계산 가능한 값은 useEffect로 보내지 말고, 외부 시스템 동기화가 필요한 작업만 이펙트로 분리합니다.