1515
1616## TanStack Query(React) v5
1717
18- - ⭐️ TanStack Query(React)가 ` 23.10.17 ` v5를 릴리즈됐습니다. 해당 문서는 v5기준으로 작성되어 있습니다.
18+ - ⭐️ TanStack Query(React) ` v5 ` 가 23.10.17에 릴리즈됐습니다. 해당 문서는 ` v5 ` 기준으로 작성되어 있습니다.
1919- ⭐️ 기존 ` v4 ` 문서는 [ react query tutorial v4 문서] ( https://github.com/ssi02014/react-query-tutorial/tree/master/README.v4.md ) 를 확인해주세요.
2020
2121![ 스크린샷 2023-10-18 오전 2 09 09] ( https://github.com/ssi02014/react-query-tutorial/assets/64779472/84de2a61-7e39-4d52-aed8-b0ab67af95bc )
434312 . [ 실패한 쿼리에 대해 재요청하는 retry] ( #retry )
444413 . [ onSuccess, onError, onSettled] ( #onsuccess-onerror-onsettled ) - 💡 ** v5 @Deprecated **
454514 . [ select를 이용한 데이터 변환] ( #select )
46- 15 . [ 쿼리가 pending상태 동안 보여 줄 수 있은 placeholderData] ( #placeholderdata )
46+ 15 . [ 쿼리가 pending 상태인 동안 보여 줄 수 있 placeholderData] ( #placeholderdata )
474716 . [ Paginated 구현에 유용한 keepPreviousData] ( #keepPreviousData ) - 💡 ** v5 @Deprecated **
484817 . [ 쿼리를 병렬(Parallel) 요청할 수 있는 useQueries] ( #parallel )
494918 . [ 종속 쿼리(Dependent Queries)] ( #dependent-queries )
@@ -152,7 +152,7 @@ function App() {
152152- react-query는 ` 전용 devtools ` 를 제공한다.
153153- devtools를 사용하면 React Query의 모든 내부 동작을 ` 시각화 ` 하는 데 도움이 되며 문제가 발생하면 ` 디버깅 시간을 절약 ` 할 수 있다.
154154- devtools는 기본값으로 ` process.env.NODE_ENV === 'development' ` 인 경우에만 실행된다, 즉 일반적으로 개발환경에서만 작동하므로 설정되어있으므로, 프로젝트 배포 시에 Devtools 삽입코드를 제거해줄 필요가 없다.
155- - ** devtools 사용하기 위해 별도의 패키지 설치가 필요하다.**
155+ - ** devtools를 사용하기 위해서는 별도의 패키지 설치가 필요하다.**
156156
157157``` bash
158158$ npm i @tanstack/react-query-devtools
@@ -707,7 +707,7 @@ const combinedQueries = useQueries({
707707```
708708
709709- combinedQueries는 ` data ` 와 ` pending ` 프로퍼티를 갖는다.
710- - _ Note_ : 참고로 결합하면 쿼리 결과의 나머지 다른 프로퍼티들은 손실 된다 .
710+ - _ Note_ : 참고로 결합하면 쿼리 결과의 나머지 다른 프로퍼티들은 손실된다 .
711711
712712<br />
713713
@@ -716,7 +716,7 @@ const combinedQueries = useQueries({
716716[ 목차 이동] ( #주요-컨셉-및-가이드-목차 )
717717
718718- [ Dependent Queries 공식 문서] ( https://tanstack.com/query/v5/docs/react/guides/dependent-queries )
719- - ` 종속 쿼리 ` 는 어떤 A라는 쿼리가 있는데 이 A쿼리를 실행하기 전에 사전에 완료되어야 하는 B 쿼리가 있는데, 이러한 B쿼리에 의존하는 A쿼리를 종속 쿼리라고 한다.
719+ - ` 종속 쿼리 ` 는 어떤 A라는 쿼리가 있는데 이 A 쿼리를 실행하기 전에 사전에 완료되어야 하는 B 쿼리가 있는데, 이러한 B 쿼리에 의존하는 A 쿼리를 종속 쿼리라고 한다.
720720- react-query에서는 ` enabled ` 옵션을 통해 종속 쿼리를 쉽게 구현할 수 있다.
721721
722722``` tsx
@@ -744,7 +744,7 @@ const { data: courses } = useQuery({
744744
745745- useQueryClient는 ` QueryClient ` 인스턴스를 반환한다.
746746- ` QueryClient ` 는 캐시와 상호작용한다.
747- - QueryClient는 다음 문서에서 자세하게 다룬다
747+ - QueryClient는 다음 문서에서 자세하게 다룬다.
748748 - [ QueryClient] ( https://github.com/ssi02014/react-query-tutorial/tree/master/document/queryClient.md )
749749
750750``` tsx
@@ -794,7 +794,7 @@ const useSuperHeroData = (heroId: string) => {
794794
795795- [ prefetching 공식 문서] ( https://tanstack.com/query/v5/docs/react/guides/prefetching )
796796- prefetch는 말 그대로 미리 fetch해오겠다는 의미이다.
797- - 비동기 요청은 데이터 양이 클 수록 받아오는 속도가 느리고, 시간이 오래걸린다 . 사용자 경험을 위해 데이터를 미리 받아와서 캐싱해놓으면? 새로운 데이터를 받기전에 사용자가 캐싱된 데이터를 볼 수 있어 ` UX에 좋은 영향 ` 을 줄 수 있다.
797+ - 비동기 요청은 데이터 양이 클수록 받아오는 속도가 느리고, 시간이 오래 걸린다 . 사용자 경험을 위해 데이터를 미리 받아와서 캐싱해놓으면? 새로운 데이터를 받기전에 사용자가 캐싱 된 데이터를 볼 수 있어 ` UX에 좋은 영향 ` 을 줄 수 있다.
798798 - 예를 들어 페이지네이션을 구현했다고 가정하면, 페이지1에서 페이지2로 이동했을 때 페이지3의 데이터를 미리 받아놓는 것이다!
799799- react query에서는 ` queryClient.prefetchQuery ` 을 통해서 prefetch 기능을 제공한다.
800800
@@ -803,7 +803,7 @@ const useSuperHeroData = (heroId: string) => {
803803``` tsx
804804const prefetchNextPosts = async (nextPage : number ) => {
805805 const queryClient = useQueryClient ();
806- // 해당 쿼리의 결과는 일반 쿼리들처럼 캐싱된다 .
806+ // 해당 쿼리의 결과는 일반 쿼리들처럼 캐싱 된다 .
807807 await queryClient .prefetchQuery ({
808808 queryKey: [" posts" , nextPage ],
809809 queryFn : () => fetchPosts (nextPage ),
@@ -829,7 +829,7 @@ useEffect(() => {
829829
830830- infinite 쿼리는 바로 아래에 나오겠지만 일반 쿼리들처럼 infinite 쿼리도 prefetch할 수 있다.
831831- 기본적으로 쿼리의 ` 첫 번째 페이지만 prefetch ` 되며, 그 이상을 prefetch하려면 ` pages 옵션 ` 을 활용해야 된다.
832- - 이 경우에는 ` getNextPageParam ` 함수를 무조건 제공해줘야 한다는 점을 주의하자
832+ - 이 경우에는 ` getNextPageParam ` 함수를 무조건 제공해줘야 한다는 점을 주의하자.
833833
834834``` tsx
835835const prefetchTodos = async () => {
0 commit comments