useEffect 데이터 요청 수명

컴포넌트가 렌더링된 뒤 요청을 시작하고, 의존성이 바뀌거나 언마운트될 때 AbortController로 오래된 요청을 정리합니다.

1

effect start

useEffect 내부에서 async 함수를 정의해 호출하고 loading과 error 상태를 초기화합니다.

2

dependency

userId, page, query처럼 요청 결과를 바꾸는 값만 의존성 배열에 넣습니다.

3

cleanup

AbortController나 mounted flag로 언마운트 후 setState 경고와 오래된 응답 반영을 막습니다.

4

deps

의존성 누락으로 오래된 데이터가 보이지 않는지 확인합니다.

5

race

빠르게 값이 바뀔 때 마지막 요청 결과만 반영합니다.

핵심useEffect 데이터 요청 수명은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.