useEffect async

비동기 effect는 loading, success, error, cleanup 상태로 읽는다

mount 후 fetch가 시작되고 cleanup이 오래된 응답 반영을 막는 흐름을 명시하면 stale response 처리가 쉬워진다.

01 mounteffect 실행

loading을 true로 둔다.

02 fetchPromise 대기

응답 전에는 이전 상태와 구분한다.

03 success/errordata 또는 error 반영

nullable 상태를 명확히 둔다.

04 cleanupunmount/stale 응답 무시

살아 있는 컴포넌트만 상태를 바꾼다.

구분의미판단
상태 타입data: T | null, error: Error | nullUI 분기를 예측 가능하게 함
depseffect 재실행 조건누락 시 오래된 값 사용 위험
custom hook복잡한 fetch 분리컴포넌트 계약 단순화

핵심 useEffect 비동기는 await 문법보다 상태 전이와 정리 경계를 타입으로 드러내는 설계가 중요하다.