react query를 적용하자

프론트 개발을 하면서 모든 작업을 프론트단에서 할 수 있으면 좋겠지만, 아쉽게도 대부분의 프로젝트가 api 호출이 필요하다. 프로젝트 마다 다르지만 많은 api를 호출하고 사용하기 위해서는 관리가 필요하다. 더 효율적이고 가독성이 좋고 편리하게 api 호출을 하기위해서 react query를 사용해보자.

const [data, setData] = useState(); 
useEffect(() => {
  const fetchData = async () => {
    const result = await API;
    setData(result.data);
  }
  fetchData();
}, [])

react로 데이터를 fetching하는 기본 코드는 이런 형태이다.
useEffect에서 fetchData 함수를 선언하고 사용해서 data state에 저장하여 사용한다.

정상적으로 작동하고 문제가 없는데, 데이터를 가져오는 부분과 state가 분리되어 있어서 코드의 양이 늘어나면 가독성이 현저하게 떨어진다.

const {
	data,
	isLoading,
	refetch,
} = useQuery({
	queryKey: ['getList'],
	queryFn: () => getAPI(url, API),
});

react query 기본 형태다. 위에 react 기본 형태 처럼 fetching부와 state 선언부가 나눠져있지 않고 선언적이다. 따로 state를 만들어서 사용하지 않아도 되어서 구조 자체가 편리한 것 같다. 그리고 loading 상태와 refetch 함수를 전달해준다. 선언하는 상태들이 줄어들고 api 정보가 한눈에 보여 가독성이 훨씬 올라갔다.

가독성의 장점은 알겠고 다른 장점은 또 무엇이 있을까?

중복 요청 제거

본인은 사실 중복 요청때문에 react query를 사용하게 되었다.
react query 사용전 swr을 사용하고 있었는데 같은 api를 다른 곳에서 사용하는데 여러번 호출되어 사용되었다. ( swr 버전이 낮아서 그랬을지도 모름 )

하지만 react query는 key 값이 같은 호출은 1개로 취급을 해서 중복 호출을 자동으로 막아준다!

콜백 함수 리턴

다음으로 콜백함수를 리턴 받는게 개인적으로 굉장히 편리한 것 같다.
post 전송 처럼 이벤트에 따라 호출되는 함수는 try, catch 문으로 제어가 가능하기 때문에 상관없는데 get 호출에서 콜백함수를 받으니까 필터링이 꼭 필요한 곳이라던지 state에 저장이 필요한 경우 유용했다.

const [filteringData, setFilteringData] = useState();
const {
	data,
	isLoading,
	refetch,
} = useQuery({
	queryKey: ['getList'],
	queryFn: () => getAPI(url, API),
    onSuccess: (data) => setFilteringData(data),
    onError: (err) => console.log(err),
    onSettled: (data, error) => { ... }
});

onSuccess (성공시), onError (에러시), onSettled (성공, 에러 둘 다) 콜백 함수는 이렇게 3개를 받을 수 있다.

캐시

react query 가 가장 강력한 부분이 캐시처리 부분이라고 들었다. 하지만 본인은 캐시처리를 아직 사용하지 않아서 나중에 따로 정리해야겠다.