TS · REACT

useEffect 비동기 상태 머신

비동기 effect는 로딩, 성공, 실패, 정리 상태를 명시적으로 나누면 stale response와 null 상태 처리가 쉬워집니다.

useEffect 비동기 상태 머신 구조

effect state
mounteffect 실행, loading true
fetchPromise 대기
success/errordata 또는 error 상태 반영
cleanupunmount/stale 응답 무시
mountfetchsuccess/errorcleanup

useEffect 비동기 상태 머신 기준

점검
타입 상태data: T | null, error: Error | null을 명확히 둡니다.
취소 플래그완료 시점에 컴포넌트가 살아 있는지 확인합니다.
deps의존성 배열은 effect 재실행 조건입니다.
분리복잡한 fetch 상태는 custom hook으로 분리합니다.