React-Query: 서버 상태 관리하기

react-query는 서버 상태를 관리하기 위한 라이브러리이다. 서버 상태란 서버에서 받아온 데이터를 관리하는 것을 말한다.

데이터를 서버에서 가져오게 되면, 해당 데이터를 얼마나 유지하고 있어야 하는지, 언제 다시 가져와야 하는지 등을 관리해야 한다.

이때 react-query를 사용하게 되면 쉽게 관리할 수 있다.

v4 버전 부터는 react 뿐만 아니라 vue나 svelte등 다른 프레임워크에서도 사용할 수 있게 개발이 되면서 tanstack-query로 이름이 변경 되었다.

설치 및 세팅

데이터 가져오기

데이터를 가져올때애는 useQuery 훅을 사용한다.

const query = useQuery( { queryKey: [ ‘key’ ],   queryFn: callback })

데이터를 가져오는 useQuery 훅은 고유한 키와 콜백함수를 받아서 데이터를 가져온다.

const getData = () => fetch(url).then( res  => res.json() );

const query = useQuery( { queryKey: [‘data’],   queryFn: getData });

useQuery()훅은 4가지 프로퍼티와 2가지 메서드를 반환한다.

가져온 값을 캐실할때에는 다음과같이 staleTimecacheTime을 사용할 수 있다.

const query = useQuery({
      queryKey: ['data'],
      queryFn: 'getData',
      staleTime: 5000,
      cacheTime: 60000 
    })

데이터 쓰기

데이터를 쓸때에는 useMutation 훅을 사용한다.

const mutation =  useMutation({ mutationFn: mutationFunction })

useMutation 훅은 4가지 프로퍼티 및 메서드를 반환한다.

데이터를 쓸때에도 useQuery를 사용할 수 있지만 useMutation을 사용하면 데이터를 업데이트후 query key를 통해 관련 데이터를 다시 가져오게 한다 던가 하는 작업을 할 수 있다.

const { mutate } = useMutation({
    mutationKey: ['/products/update'],
    mutationFn: () => getProduct(),
    onSuccess: () => { 
      queryClient.invalidateQueries({ queryKey: ['/products/find'] });
    },
  });

위와 같이 useMutation을 사용하면 성공시에 onSuccess를 통해 다시 데이터를 가져오게 할 수 있다.