TanStackQuery (18) - 회고

 

이번 포스트에서는 Tanstack-query를 공부하면서 느낀점을 서술해보고자 한다.

 

먼저 잘 이해가 가지 않았던 질문들을 gpt와 질의응답을 통해 작성해보았다.

 

1. useQuery와 useSuspenseQuery를 언제 사용하는가?

useQuery : 비동기 데이터를 패칭할 때 사용, 데이터 로딩 상태 오류 상태 등을 관리할 수 있다

useSuspenseQuery : React의 Suspense를 활용하여 데이터 로딩 상태를 자동으로 처리한다.

 

여기서 추가적으로 우리는 학습으로 useQuery는 병렬처리, useSuspenseQuery는 직렬처리한다고 배웠다.

tanstackquery에서 직렬처리하라고 권장하기 때문에 useSuspenseQuery를 사용하자

 

2. useSuspenseQuery을 사용할 때 제공해주는 많은 함수들은 언제 사용해야하는가? 

우리는 useSuspenseQuery를 사용하여 데이터 패칭을 진행할 때 관리에 대한 여러가지 함수에 대해 배웠다.

그렇다면 언제 사용할까?..

당연히 필요할 때 사용해야지!

따라서 그러한 기능들을 기억하자

 

3. useSuspenseQuery를 사용하면 컴포넌트 간 데이터 공유는 어떻게 이뤄지는가?

데이터 공유 과정은 다음과 같다.

1. 자동 캐싱
   1. useSUspenseQuery로 요청한 데이터는 React Query의 캐시에 자동으로 저장된다.
      동일한 쿼리 키를 사용하는 다른 컴포넌트는 이 캐시된 데이터를 즉시 사용할 수 있다
2. 쿼리 키
   1. 쿼리키를 데이터를 식별하기 때문에 동일한 쿼리키를 사용하는 모든 컴포넌트는 같은 데이터를 공유하게 된다
3. 자동 리패칭
   1. 데이터가 변경되거나 쿼리가 무효화되면 React Query는 자동으로 해당 쿼리를 리패칭하여 최신 데이터를 제공한다
      이를 통해 여러 컴포넌트가 같은 userData를 공유한다.

4. 날 괴롭혔던 부모 컴포넌트와 자식 컴포넌트의 동시에 렌더링

지난번에 진행한 토이3 프로젝트에서의 부모, 자식 동시에 컴포넌트 렌더링에 대한 해결방법은

부모컴포넌트에서 한번에 data를 받아 props로 내려주는 것이다.

 

음..
근데 내가 직면한 문제는

부모 컴포넌트에서 user테이블의 user_id를 참조하여 자식 컴포넌트의 videos테이블을 filter하여 데이터를 가져올 때인데,

hook의 최상위 호출 규칙 때문에 반복문 안에서 사용이 불가하여 부모 컴포넌트 자체에서 반복문을 통해 user_id를 props로 내려줬었다.

자식 컴포넌트에서 user_id를 받아 api를 처리하는데, 이때 부모 컴포넌트와 자식 컴포넌트가 동시에 렌더링되게 처리하고 싶었다.

 

이제는 Suspense를 활용한 로딩 처리를 진행하면 데이터가 준비될떄까지 렌더링을 자동으로 중단하는 것을 알기 때문에

이를 적용하면 해결할 수 있다는 것을 알게 되었다

 

5. 느낀점

처음에는 라이브러리를 학습함에 있어서 귀찮음과 두려움이 많았지만 역시 그냥 하면 된다는 것을 깨닫게 되었다.

학습한 내용을 바탕으로 파이널 프로젝트에서 잘 써보도록 하겠다~!