React-Query 기본 사용법

React-Query는 React 애플리케이션에서 데이터 관리를 위한 라이브러리입니다. React-Query를 사용하면 서버에서 가져온 데이터를 캐싱하고, 상태 업데이트와 재요청 등을 자동으로 처리할 수 있습니다.

React-Query를 사용하려면 다음과 같은 단계를 따릅니다.

 

• React-Query 설치

npm install react-query
yarn add react-query

 

• Query 컴포넌트 작성

React-Query에서 제공하는 useQuery 훅을 사용하여 데이터를 가져옵니다.

useQuery 훅은 data, isLoading, isError 등의 상태 값을 반환합니다.

import { useQuery } from 'react-query';

function App() {
  const { data, isLoading, isError } = useQuery('todos', async () => {
    const response = await fetch('/api/todos');
    return response.json();
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error occurred while fetching data</div>;
  }

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

위의 예시에서 useQuery 훅은 'todos'라는 고유한 이름의 쿼리를 만들어 API에서 데이터를 가져옵니다.

 

• Mutation 컴포넌트 작성

React-Query에서 제공하는 useMutation 훅을 사용하여 데이터를 수정합니다.

import { useMutation } from 'react-query';

function App() {
  const [text, setText] = useState('');

  const { mutate, isLoading } = useMutation(
    async newTodo => {
      const response = await fetch('/api/todos', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(newTodo),
      });
      return response.json();
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries('todos');
      },
    }
  );

  const handleSubmit = e => {
    e.preventDefault();
    mutate({ title: text });
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={e => setText(e.target.value)} />
      <button disabled={isLoading}>Add</button>
    </form>
  );
}

 

위의 예시에서 useMutation 훅은 데이터를 수정하는 mutate 함수를 반환합니다.

mutate 함수를 호출하면 API에 데이터를 보내고, onSuccess 콜백에서 queryClient.invalidateQueries 함수를 호출하여 todos 쿼리를 재요청합니다.

 

React-Query는 다양한 기능을 제공하며, 위에서는 간단한 예시만을 다루었습니다.

더 자세한 내용은 공식 문서를 참고하세요.

https://react-query-v3.tanstack.com/