React Query를 쓰는 이유와 기본 사용법

리액트 쿼리(React Query)란

React를 사용할  비동기 데이터 페칭, 캐싱, 동기화, 업데이트를 돕는다.

쉽게 말해 서버에서 데이터를 가져오고 관리하는 작업을 쉽게 처리하도록 도와주는 라이브러리다.  

 

왜 리액트 쿼리인가?

useState, useEffect로도 충분히 상태관리가 가능하다. 왜 React Query를 쓰는가?

 

우선 React Query에서 제공하는 기능은 다음과 같다.

- 자동 캐싱 및 자동 리페칭

- 에러 핸들링

- 로딩, 성공, 에러 등의 상태 관리

- 뮤테이션 (생성, 수정, 삭제)

 

여러 가지 이유가 있겠지만 요약하자면 React Query로 대체할 시 장점이 3가지가 있다.

1. 캐싱 및 성능 최적화

2. 개발자 부담이 크게 줄어듬

3. 우수한 코드의 가독성과 유지보수성

 

자세하게 알아보자.

1. 캐싱 및 성능 최적화

자동으로 데이터를 캐싱하기 때문에 같은 쿼리를 여러 번 요청하지 않아도 된다.  자동 리패칭 기능이 있기 때문에 실시간으로 새로운 데이터로 업데이트가 가능하고 불필요한 서버 요청이 없어진다.

useEffect와 useState를 사용했다면 직접 캐싱을 구현해야 하고, 갱신 로직도 직접 구현해야 한다.

 

2. 줄어든 개발자 부담 

1번과 이어지는 부분이지만, 개발자가 직접 구현해야하는 코드가 줄어들기에 간단하고 직관적인 코드가 완성된다. 

 

3. 우수한 코드의 가독성과 유지보수성

직접 상태 관리 로직, 에러 핸들링 로직도 직접 구현하지 않아도 되므로 코드가 장황해지는 것을 피할 수 있다. 

 

 

기본 사용법:

1. 아래의 명령어로 리액트 쿼리를 설치해주고

 

npm install react-query

 

2. QueryClient를 생성한 후, QueryClientProvider로 컴포넌트를 감싸주면 된다.

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

export default App;

 

3. 쿼리 키와 쿼리 함수를 인자로 받는 "useQuery" 훅을 사용하여 데이터를 가져오거나,

const fetchUsers = async () => {
  const res= await fetch('some random url');
  if (!res.ok) {
    throw new Error('Response was not ok');
  }
  return res.json();
};

const Users = () => {
  const { data, error, isLoading, isError } = useQuery('users', fetchUsers);

 

useMutation 훅을 사용하여 데이터를 생성, 업데이트, 삭제하는 작업을 할 수도 있다.

const AddUser = () => {
  const queryClient = useQueryClient();
  const [name, setName] = useState('');

  const mutation = useMutation(addUser, {
    onSuccess: () => {
      // 쿼리를 무효화하여 데이터가 최신 상태로 유지되도록 함
      queryClient.invalidateQueries('users');
    },
  });