useEffect
effect는 렌더 이후 외부 자원의 시작과 정리를 맞춘다
버튼으로 컴포넌트를 보이게 하거나 숨기면 mount, update, unmount 시점의 effect와 cleanup 실행 순서를 콘솔에서 확인할 수 있다.
mount
화면에 처음 붙은 뒤 effect가 실행된다.
update
의존성 값이 바뀌면 기존 정리 후 다시 실행된다.
unmount
화면에서 사라질 때 cleanup이 마지막으로 실행된다.
render
UI 계산
React가 화면에 반영할 컴포넌트 결과를 만든다.
commit
DOM 반영 후 effect 실행
네트워크, 타이머, 구독 같은 외부 작업을 시작한다.
deps change
의존성 비교
필요한 경우 이전 effect를 정리하고 새 effect를 실행한다.
cleanup
외부 자원 정리
타이머, 구독, 요청 취소처럼 남으면 안 되는 작업을 끊는다.
의존성
실행 기준
대표 용도
없음
렌더링 이후 매번 실행된다.
거의 항상 과도하므로 의존성 분리를 먼저 의심한다.
빈 배열
mount 후 한 번 실행, unmount 때 정리한다.
초기 구독, 최초 요청, 타이머 시작에 사용한다.
값 배열
지정한 값이 바뀔 때만 다시 실행된다.
id 변경에 따른 재요청, 필터 변경에 따른 동기화에 맞다.
렌더와 분리
화면 계산은 렌더에서, 외부 시스템 연결은 effect에서 처리한다.
정리 먼저 생각
시작한 작업이 있다면 사라질 때 끊는 코드도 함께 둔다.
의존성은 계약
effect가 읽는 값과 다시 실행되어야 하는 조건을 일치시킨다.