리액트 시작하기

React에서 Promise.all()보다 더 쉽게 여러 비동기 데이터를 관리하고 싶다면 보통 데이터 패칭 라이브러리(플러그인)를 사용합니다.

많이 사용하는 것은 다음과 같습니다.

1. React Query (가장 많이 사용) ⭐

TanStack Query (구 React Query)

설치:

npm install @tanstack/react-query

사용 예:

const { data: nowPlaying } = useQuery({
queryKey: ["nowPlaying"],
queryFn: getNowPlayingMovies,
});

const { data: popular } = useQuery({
queryKey: ["popular"],
queryFn: getPopularMovies,
});

const { data: topRated } = useQuery({
queryKey: ["topRated"],
queryFn: getTopRatedMovies,
});

장점:

useEffect 직접 작성 필요 감소
loading, error 자동 관리
데이터 캐싱 자동
같은 API 재요청 방지
영화 앱 같은 프로젝트에 많이 사용
2. SWR

SWR

설치:

npm install swr

사용:

const { data, error, isLoading } = useSWR(
"/movies",
getMovies
);

장점:

코드가 매우 간단
자동 캐싱
자동 재검증
3. Axios + Promise.all (기본 방식)

라이브러리를 쓰지 않는다면:

npm install axios
const [nowPlaying, popular, topRated] = await Promise.all([
axios.get("/now-playing"),
axios.get("/popular"),
axios.get("/top-rated"),
]);
추천 순서

영화 API 프로젝트라면:

⭐ TanStack Query (React Query) → 실무에서 가장 추천
SWR → 간단한 프로젝트
useEffect + Promise.all → 학습용 / 작은 프로젝트

지금 작성 중인 영화 앱 구조라면 처음에는 useEffect + Promise.all로 원리를 이해하고, 다음 단계로 TanStack Query를 배우면 좋습니다.