리액트쿼리를 쓴다면 이건 꼭 알고 쓰자

현재 사이드 프로젝트를 진행하면서

SWR을 사용해보자는 생각으로 시작했다.

그렇게 리액트쿼리랑 조금씩 멀어지면서 느낀건 리액트쿼리 만한 라이브러리가 없다는 것...

 

프로젝트가 끝나가면서 팀원들과 디자인을 새로 변경해보자는 의견이 나왔고..

새로 디자인 작업을 하면서 지금까지 만든 로직들을 전부 변경해야하는 일이 발생했다.

 

그렇게 api도 조금씩 수정해나가야했는데 그냥 리액트쿼리로 변경할까요? 라는 의견에 다른 프론트엔드 팀원도 좋다고하여 리액트쿼리로 다시 변경했다.

 

작업 전 리액트쿼리 공식문서를 다시 읽었다. 내가 모르는것들이 많았다...

이번에 리액트쿼리 v5를 사용하면서 기존에 있었던 것들과 추가된 것들에 있어서 더 편하게 사용할 수 있는 기능들을 정리해보려고 한다.

그리고 알고 넘어가야 하는것들도 같이..!

 

---

isLoading, isFetching 의 차이

- isLoading은 첫 데이터를 가져올때의 상태를 이야기한다.

- isFetching은 첫 로딩이 아닌 데이터를 다시 가져와야할 때 사용된다.

   - 그러나 여기서 알고 있어야하는건 기존의 데이터가 캐시되어있느냐에 따라 다르다고 볼 수 있을것 같다.

 

---

useQuery 자동호출 막기 feat.enabled

- useQuery로 get요청을 해봐서 알겠지만 useQuery는 호출되는 즉시 요청을 한다.

- 내가 원하는 시점에 get요청을 날릴려면? useMutation을 쓰기보다는 enabled값에 false를 주자! 그리고 refetch를 통해서 요청을 하게되면 내가 요청하는 시점을 정할 수 있다.

const { data, refetch } = useQuery({
	queryKey: ['getFunc'],
    queryFn: () => getFunc(),
    enabled: false
});

 

 

---

useQuery에서 새로운 데이터가 생길 때 깜빡이는 현상

- useQuery가 get요청만 하지만 요청하는 query값에 따라서 재요청을 하는 경우가 많다. mutation을 통해서 데이터를 생성, 수정, 삭제를 했을 때에도 마찬가지일거다.

- 그럴때 사용할 수 있는 { placeholderData: keepPreviousData } 값을 주자.

import { keepPreviousData } from '@tanstack/react-query';

const { data } = useQuery({
	queryKey: ['getFunc'],
    queryFn: () => getFunc(),
    placeholderData: keepPreviousData,
});

const { data } = useQuery({
	queryKey: ['getFunc'],
    queryFn: () => getFunc(),
    keepPrevious : true
});

• keepPreviousData : 새 데이터를 요청하는 동안 이전 데이터를 임시로 사용
  • 새 데이터를 요청하는 동안 임시로 사용
  • 이전 데이터를 클라이언트 측에만 유지
  • 이전 데이터를 캐시하지 않음
  • 자주 변경되지 않는 경우, 데이터 손실이 크게 중요하지 않은 경우에 사용
• keepPrevious: 새 데이터를 요청하는 동안 이전 데이터를 유지
  • 이전 데이터를 서버측에 유지
  • 이전 데이터를 캐시
  • 데이터가 자주 변경되는 경우, 데이터 손실을 방지해야하는 경우에 사용

 

 

---

useMutation 사용 시 mutate로 인수 전달하는 방법

 const mutation = useMutation({
    mutationFn: (newTodo) => {
      return axios.post('/todos', newTodo)
    },
  })
  <button
	onClick={() => {
		mutation.mutate({ id: new Date(), title: 'Do Laundry' })
	}}>
	Create Todo
</button>

- 기존에는 항상 const { mutate } = useMutation 으로 사용을 했었는데 이럴때마다 커스텀 훅을 만들더라도 전역상태로 관리를 하거나 props로 훅으로 전달할 data를 보내고는 했다.

- useMutation을 상수에 담고 .mutate를 하게 되면 이제 인수로 객체를 전달하여 mutation을 실행할 수 있다.

 

 

---

이 외에도 optimistic을 적용한다거나 placeholder를 사용하는 것들이 있었다.

리액트쿼리를 사용하는 이유는 api요청에 대한 상태관리를 쉽게 하는것인데 더 쉽고 편하게 사용할 수 있는 기능들이 많은 것 같다.

역시 라이브러리 하나를 사용하기전에는 모든 공식문서를 다시 한번씩 정독하고 사용해보는건 어떨까?

 

요즘은 gpt, bard(잼민이)를 사용하기 전에 공식문서를 더 보게 되는것 같다.ㅜㅜ