React-Query의 주요 목적
- 서버 데이터 요청 관리: 가져오기, 캐싱, 재시도 등
- 캐싱 및 데이터 관리: 요청한 데이터를 캐싱하여 중복 요청 줄이기
Next에서 React-Query가 필요 없다고 생각한 이유
가장 큰 이유는 Next13의 fetch 함수는 캐싱이 가능하기 때문이다.
-
revalidate를 설정하여 다음 요청이 들어올 때 새로운 버전의 페이지를 제공
React-Query의staleTime과 유사: 데이터가 오래되었을 때 새로 불러오기 -
revalidateTag로 특정 데이터가 변경되었는지 확인하고, 필요한 경우 최신 상태로 업데이트
React-Query의Query Invalidation과 유사
두번째 이유는 병렬 비동기 API 요청이 Next13에서도 가능했기 때문이다.
- Next13의
Parallel Routes와Promise.all이용
React-Query의 Parallel Queries와 유사
→ fetch 함수로도 캐싱을 관리할 수 있는데 굳이 react-Query를 사용해야할 필요성은?
React-Query 도입 계기
클라이언트 컴포넌트에서의 비동기적 데이터 처리
적용 전:
클라이언트 컴포넌트에서 비동기 데이터를 불러와야 할 때는 주로 서버 컴포넌트에서 데이터를 불러와 props로 전달받아 렌더링하거나 useState와 useEffect를 이용해 데이터를 받아왔다.
필터링 옵션이 변경될 때와 같이 사용자 상황에 따른 동적 데이터를 받아와야할 때 비동기 처리 함수를 계속 호출하는 것이 번거로웠다.
적용 후:
queryKey 배열에 변수명을 추가하여 변수명이 변경될 때마다 자동으로 새로운 데이터를 받아올 수 있었다. 비동기 처리 함수를 한 번만 사용해서 동적 데이터 처리가 가능하게 되었다.
로딩 UI 렌더링 간편화
적용 전:
컴포넌트 로딩 UI를 렌더링하기 위해서 컴포넌트 외부를 React.Suspense로 감싼 후 fallback에 로딩 컴포넌트를 넣어야했다.
적용 후:
useQuery가 반환하는 isLoading을 이용하여 스피너를 이전보다 간편하게 렌더링하였다.
단순히 클라이언트 컴포넌트에서의 useState, useEffect의 사용이 번거로워서 도입을 했지만 공식 문서를 공부하면서 유용한 기능들을 보게 되었다.
이외의 React-Query의 유용한 기능들
- 한 쿼리의 결과에 의존하여 다른 쿼리를 수행하는 종속 쿼리
- 조건에 따른 쿼리 비활성화
onMutate를 활용한 낙관적 업데이트useInfiniteQuery로 페이지네이션 및 무한 스크롤 구현PrefetchQuery로 미리 렌더링하기
위 기능들 중 프로젝트에 적용한 기술
useInfiniteQuery
게시글 상세 페이지 하단에 리뷰 렌더링 과정에서 기본 3개의 리뷰를 렌더링하고 '더보기' 버튼을 누를 경우 5개씩 더 불러와서 렌더링을 위해 사용하였다.
적용 예정
PrefetchQuery
Next13의 Link 컴포넌트도 prefetch 진행하지만 해당 페이지로 라우팅에 필요한 정적 파일을 미리 로드한다.
React-Query의 PrefetchQuery는 정적 리소스 뿐만 아니라 API를 통해 가져온 데이터도 사전 패칭된다.
글 목록에서 상세게시글로 넘어갈 때, 상세 게시글에서 신청하기 페이지로 넘어갈 때 등의 페이지에 적용할 예정이다.
