메인테이너가 알려주는 리액트 쿼리 팁

원본 영상 : React Query tips from the maintainer @tkDodo

1. useEffect가 나쁜 건 아니지만, useEffect를 제거한다면 코드의 복잡성과 불필요한 렌더링을 줄일 수 있다.

2. useQuery는 쿼리 캐시에 있는 데이터에 대한 구독을 생성하는 훅이므로, 명령적으로 쿼리 클라이언트를 선언해 데이터를 가져오면 불필요한 렌더링을 줄일 수 있다.

3. 로컬 상태를 변경하기 위해 useMutation에서 리턴한 데이터를 사용하지 않는 게 좋다. useMutation은 필요에 따라 요청을 보내고 유용한 상태나 콜백과 함께 받을 수 있는 모음이며, 데이터를 가져오고 그 데이터를 이용하기 위해 설계된 것이 아니다. useMutation을 이용하여 DB에 있는 데이터가 변경되면, 반환된 데이터를 이용하기보다 변경된 데이터를 반영하기 위해 쿼리 캐시를 업데이트를 하는 편이 더 좋다. (useMutation은 업데이트를 위한 훅이고, 상태 관리를 위한 훅은 useQuery이다.) 이에는 두가지 방법이 있다.

   1. useMutation에서 반환된 데이터를 useQuery 캐시에 수동으로 업데이트 하기

   2. useMutation이 이뤄지면, useQuery 캐시를 무효화(invalidate)함으로써 다시 페치하도록 하기

      useMutation 훅의 옵션으로 onSuccess, onError, onSettled 등의 콜백 함수를 전달할 수 있으며, onSettled 콜백으로 쿼리 클라이언트의 invalidateQueries() 메소드를 실행하는 함수를 전달하면 useMutation의 성공 여부와 관계 없이 데이터를 최신화할 수 있다.

4. 쿼리 클라이언트를 사용할 때에는 인스턴스를 직접 임포트하는 것보다 useQueryClient 훅을 사용하는 게 더 좋다. 그 이유는 다음과 같다.

   1. 서버사이드 렌더링 환경에서, 쿼리 클라이언트를 어플리케이션 바깥이 아니라 앱 컴포넌트 내부에서 생성하게 된다. 서버와 클라이언트 사이에 데이터가 공유되지 않고, 인스턴스를 익스포트할 수 없으므로 임포트할 수도 없다.
   2. 테스팅에 유리하다. useQueryClient 훅을 사용한다면 리액트 컴포넌트 트리에서 가장 가까운 프로바이더로부터 상태를 읽어들인다. 테스트 상황에서 테스트 프로바이더를 사용하고, 실제 어플리케이션에서 진짜 프로바이더를 사용한다면 쿼리 클라이언트를 사용하기 위해 useQueryClient 훅을 호출하기만 하면 된다.

5. UI를 제대로 보여줄 수 있는 최소한의 상태만을 useState에 저장하고 나머지를 쿼리 캐시에서 가져오는 게 좋다.