react-query에서 특정 상황에서만 데이터를 조회하고 싶을 때

https://careerly.co.kr/qnas/1273?fa=qna-list 

react-query useQuery vs...

 

커리어리에 올라온 질문에 답변을 하다가 react-query를 이용하여 데이터를 특정 상황에서만 조회하고 싶을 때 어떤 hook을 사용해야 하는지 고민해보았다.

 

2가지 방법으로 특정 상황에서만 데이터를 조회할 수 있을 것 같다.

 

1. useQuery 사용

 - useQuery를 기본적으로 enable: false 상태로 두고, refetch 함수를 통해 특정 상황에서 데이터를 가져온다

 

2. useMutation 사용

 - 일반적인 방법은 아니지만 특정 상황에서 mutate함수를 실행하여 get 요청을 한다.

 

두 방법 모두 요구사항을 해결 할 수 있지만 다음을 이유로 useQuery를 사용하는게 더 좋은 방향이라는 결론을 지었다.

 

useQuery의 장점

1. data를 read하는 행위를 useQuery로 유지한다.

  - Create/Update/Delete 작업은 useMutation을 사용하는게 일반적이기 때문에 read작업을 useQuery로 사용하면서 컨벤션을 유지할 수 있는 장점이 있다.

 

2. useQuery를 재사용 할 수 있다

 - enable 값을 옵셔널하게 가져가면 다른 컴포넌트에서 용도가 다르게 같은 hook을 사용할 수 있다.