React에서 데이터를 어떻게 페칭하고 경쟁 상태를 어떻게 피하나요?

Question

Accepted Answer

기본 접근법은 `useEffect`를 사용하지만, **cleanup**과 **순서가 뒤바뀐 응답**을 처리해야 합니다. 그렇지 않으면 오래된 데이터와 경고가 발생합니다.

```jsx
function User({ id }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

useEffect(() => {
    const ctrl = new AbortController();
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setUser)
      .catch(e => { if (e.name !== "AbortError") setError(e); });

return () => ctrl.abort(); // id 변경/unmount 시 진행 중인 요청 취소
  }, [id]);
}
```

## 이것이 방지하는 경쟁 상태

`id`가 `1`에서 `2`로 빠르게 바뀐다고 합시다. 취소가 없으면 두 요청이 모두 진행 중입니다. 요청 `1`이 느려서 요청 `2` **이후에** 완료되면, 사용자 `2`에게 사용자 `1`의 데이터를 표시하게 됩니다:

```text
fetch(1) ───────────(느림)──────▶ setUser(user1)  ❌ 마지막에 표시되지만 잘못됨
fetch(2) ──(빠름)──▶ setUser(user2)
```

이전 요청을 중단(cleanup)하면 이 문제가 해결됩니다. 더 오래된 boolean 플래그 패턴(`let active = true; ... if (active) setUser(...)`)은 오래된 응답을 무시함으로써 동일한 효과를 냅니다.

## 실제 앱에서는 라이브러리를 사용하라

수동 페칭은 반복적이며 캐싱/재시도를 놓칩니다. **React Query(TanStack Query)** 또는 **SWR**이 로딩/오류 상태, 캐싱, 중복 제거, 백그라운드 refetch, stale-while-revalidate를 대신 처리해 줍니다:

```jsx
const { data, isLoading, error } = useQuery({ queryKey: ["user", id], queryFn: () => getUser(id) });
```

Next.js 같은 프레임워크에서는 서버 사이드 데이터 로더가 종종 더 바람직합니다.