오늘은 React Query 에 대해서 정리해봤다.
React Query는 서버 상태 관리를 위한 라이브러리로, 데이터 fetching, caching, synchronization 및 업데이트를 쉽게 처리할 수 있게 해준다. React Query를 사용하면 서버의 데이터를 마치 클라이언트 상태처럼 쉽게 다룰 수 있으며, UI와 데이터 상태를 자동으로 동기화해준다. 이는 데이터를 가져오는 복잡성과 관련된 많은 부담을 줄여준다.
React Query 설치
React Query를 사용하기 전에 먼저 설치해야 하는데 npm이나 yarn을 사용하여 설치할 수 있다.
npm install react-query
또는
yarn add react-query
기본 사용법
React Query의 기본적인 사용법을 알아보자. 가장 많이 사용되는 useQuery 훅을 이용한 데이터 fetching 예제를 살펴보면,
- Query 설정
먼저, 서버에서 데이터를 가져오는 함수를 정의한다.
예를 들어, fetchPosts 함수는 비동기적으로 포스트 목록을 가져오는 역할을 한다.
const fetchPosts = async () => {
const response = await fetch('https://exampleurl.com/posts');
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
};fetchPosts 함수는 비동기 함수(async)로 선언되어 있어, 내부에서 await 키워드를 사용해 비동기적으로 데이터를 가져올 수 있다.
fetch 함수를 이용해 특정 URL(https://exampleurl.com/posts)에서 포스트 데이터를 요청한다.
응답(response)이 성공적이지 않을 경우(if (!response.ok)), 에러를 발생시킨다.
성공적인 응답을 받으면, .json() 메소드를 통해 응답 본문을 JSON 형태로 파싱하여 반환한다.
- useQuery 사용
useQuery 훅을 사용하여 fetchPosts 함수로부터 데이터를 가져온다.
이 훅은 여러 상태를 관리해주며, 데이터를 컴포넌트에 쉽게 연결할 수 있게 해준다.
import { useQuery } from 'react-query';
function Posts() {
const { isLoading, error, data } = useQuery('posts', fetchPosts);
if (isLoading) return 'Loading...';
if (error) return 'An error has occurred: ' + error.message;
return (
<div>
<h1>Posts</h1>
<ul>
{data.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}useQuery 훅은 React Query 라이브러리에서 제공하는 핵심 훅 중 하나다.
데이터를 가져오는 로직(fetchPosts)을 실행하고, 데이터의 로딩 상태, 에러 발생 여부, 그리고 가져온 데이터를 관리한다.
useQuery의 첫 번째 인자는 쿼리의 고유한 키('posts')이다.
이 키는 캐싱, 공유, 무효화 등을 위해 사용된다.
두 번째 인자는 데이터를 가져오는 함수이다(fetchPosts).
반환값은 로딩 상태(isLoading), 에러 객체(error), 그리고 가져온 데이터(data)를 포함하는 객체이다.
로딩 중이면 "Loading..."을, 에러가 발생하면 에러 메시지를, 그리고 데이터가 성공적으로 로드되면 포스트의 제목을 리스트로 렌더링한다.
React Query는 데이터를 가져오고 캐시하는 복잡한 로직을 간소화해주며, 애플리케이션의 성능을 향상시킬 수 있게 해준다.
useQuery 외에도 다양한 훅(useMutation, useQueryClient 등)을 제공하여, 서버 상태와 관련된 다양한 작업을 더 쉽게 수행할 수 있다.
