최근 팀 프로젝트를 진행하며 서버 상태를 관리하기 위해 React Query를 사용하기 시작했습니다.
그래서 본격적인 사용 전 기본적인 사용법들을 정리합니다!

 

## 🤔 React Query 란

[React Query](https://tanstack.com/query/latest)는 서버 데이터를 가져와 캐싱, 동기화, 업데이트와 같은 기능들을 쉽게 사용할 수 있게 해주는 라이브러리입니다.


 

## 📌 React Query를 사용하는 이유
React Qeury를 사용하면 아래와 같은 기능들을 직접 구현하지 않고 쉽고 빠르게 사용할 수 있습니다.
 
1. **클라이언트 상태와 서버 상태의 분리**
 * 클라이언트에서 사용하는 상태와 서버에서 가져온 상태를 혼합하여 사용할 경우 상태 관리와 로직 작성이 복잡해지고 유지보수가 어려워질 수 있는데 이러한 경우에 React Query를 사용해 서버 상태를 따로 관리하면 프로젝트 관리가 편해집니다.
 
2. **최신 상태 유지**
 * 쉽게 최신 상태를 가져오는 기능을 제공합니다. 일정 시간마다 상태를 업데이트하거나 작 특정 동작 이후에 상태를 업데이트할 수 있습니다.
 
3. **캐싱, 중복 요청 방지**
 * API 요청 결과를 캐싱하여 관리합니다. 서버에 API 요청하여 받아온 결과를 캐싱하며 중복 요청을 최소화할 수 있습니다.
 
4. **비동기 요청에 대한 상태 핸들링**
 * 비동기 API 요청에 대한 로딩 상태, 결과 값, 에러 상태와 같은 여러가지 상태를 확인하는 기능을 제공합니다.

 

이 외에도 다양한 이유가 있지만 이러한 기능들을 쉽고 빠르게 사용할 수 있다는 것이 React Query를 사용하는 가장 큰 이유입니다.

만약 React Query를 사용하지 않고 직접 구현한다면 단순 기능 구현, 기능 테스트, 오류 수정과 같은 과정에 개발 인력 및 시간이 많이 들어가겠지요..

 
 

React query의 높은 생산성을 체감할 수 있도록 **‘4. 비동기 요청에 대한 상태 핸들링’** 을 통해 예시를 들어보겠습니다.

 
>유저 정보 불러오기 예시
>
간단한 사용자의 정보를 불러오기 위해 axios를 사용해 **'/api/user' url에 GET method 요청을 보내는 과정**입니다.
 
먼저 API 요청 결과를 보관해야 하므로 data 상태를 만들었습니다.
```js
const [data, setData] = useState(null);
```

 

데이터를 불러오는 중에 사용자에게 로딩 UI를 보여주기 위해 loading 상태를 만들었고 에러가 발생했을 때 사용자에게 알려주기 위해 error 상태도 만들었습니다.

```js
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
```


 

다음으로는 trycatch문 내에서 axois를 사용해 비동기로 API 요청을 진행하고 상황에 맞게 상태를 변경해주는 함수를 작성했습니다.

```js
const fetchUser = async () => {
 if (loading) return;

 setLoading(true);

 try {
 const response = await axios('/api/user');
 setResponse(response.data);
 } catch (error) {
 setError(true)
 }

 setIsLoading(false);
};

```


 

간단하게 유저 정보를 불러오는 작업만으로도 위와 같이 긴 코드를 작성해야 합니다.
물론 모든 API를 호출할 때마다 위의 코드를 작성하지 않기 위해 재활용성이 높은 custom hook으로 제작할 수 있지만 더 자세한 로직을 작성해야 하고 직접 테스트하는 것에 시간을 투자해야 합니다.

 

아래는 React Query를 이용해 상태를 불러온 코드입니다.
더 쉽고 간결하게 API 호출 로직을 작성할 수 있습니다.

```jsx
const fetchUser = async () => await axios.get(`/api/user`).then(res => res.data)

const { data, isLoading, error } = useQuery(['fetchUser'], fetchUser);
```

 
 
 


## ⚙ React Query 사용 준비
>설치
```bash
$ npm i @tanstack/react-query
# or
$ pnpm add @tanstack/react-query
# or
$ yarn add @tanstack/react-query
```

 

> 세팅
```jsx
const queryClinet = new QueryClient()

root.render(
 <React.StrictMode>
 <QueryClientProvider client={queryClinet}>
 <App />
 </QueryClientProvider>
 </React.StrictMode>
);

```
React Query를 사용하기 위해서는 QueryClientProvider로 컴포넌트를 감싸줘야 하고 QueryClient 인스턴스를 생성해서 props로 넘겨주어야 합니다.

필요 시 QueryClient 인스턴스를 생성하면서 React Query 사용에 관한 다양한 세팅을 추가해줄 수도 있습니다.


 

 

 

## 📃 useQuery로 데이터 가져오기
React Query로 데이터를 가져오기 위해서는 useQuery를 사용해야 하며 첫 번째 인자로 Query key를, 두 번째 인자로 API를 요청하는 비동기 함수를, 세 번째 인자로는 옵션 데이터을 넣을 수 있습니다.

이때 첫 번째 인자인 **Query key는 캐싱 처리 및 쿼리 호출에 사용되기 때문에 중복되지 않게 관리**해야 합니다.


 
 

> useQuery 사용 예시
```jsx
const fetchPosts = async () => await axios.get(`/api/post/list`).then(res => res.data)

const { data, isLoading, error } = useQuery(['fetchPosts'], fetchPosts);
```
포스트 목록을 불러오기 위해 useQuery를 사용하며 **'fetchPosts' 라는 Query key로 쿼리를 관리**합니다. 

 
 

> Query key에 파라미터 넣기
```jsx
const fetchPost = async (id) => await axios.get(`/api/post/${id}`).then(res => res.data)

const id = 1
const { data, isLoading, error } = useQuery(['fetchPost', id], () => fetchPosts(id));
```
특정 정보를 포함하여 Query key를 관리하고 싶다면 위의 예제와 같이 useQuery의 첫 번째 인자에 배열로 파라미터를 추가할 수 있습니다.
예제처럼 작성하면 1번 포스트를 불러오는 Query key를 관리할 수 있습니다.


 
 

>한번에 여러 쿼리 호출하기
```jsx
const results = useQueries({
 ueries: [
 { queryKey: ['fetchPost', id], queryFn: () => fetchPost(id)},
 { queryKey: ['fetchComment', id], queryFn: () => fetchComment(id)}
 { queryKey: ['fetchLikes', id], queryFn: () => fetchLikes(id)}
 ]
})
```
여러 가지 서버 데이터를 가져와야 하는 경우에는 useQuery를 여러 번 사용하지 말고 useQueries를 사용해보세요. 배열에 쿼리 정보를 담아서 사용하여 훨씬 간결한 로직을 작성할 수 있습니다.


 
 
 

## ✏ useMutation으로 데이터 변경하기
React Query로 데이터를 변경하기 위해서는 useMutation을 사용해야 하며 첫 번째 인자로 API를 요청하는 비동기 함수를, 두 번째 인자로는 옵션 데이터를 넣을 수 있습니다.

데이터를 변경할 때만 사용하기 때문에 캐싱 기능의 사용이 필요하지 않아 Query key는 사용하지 않습니다.

 
 

> useMutation 사용 예시
```jsx
const registPost = async (postData) => await axios.post(`/api/post`, {postData})
const { data, isLoading, error } = useMutation(() =>registPost(postData));
```
포스트를 등록하는 간단한 예제입니다. useMutation 역시 API 요청에 대한 로딩 상태, 에러 상태, 결과 등 여러 상태를 반환합니다.


 
 

포스트 등록에 성공했다면 새로운 포스트를 반영한 포스트 목록을 불러와야 할 것입니다.
이때도 useMutation의 옵션을 설정해주며 기존에 사용했던 Query key로 데이터를 쉽게 가져올 수 있습니다.

 

> 데이터 변경 성공 이후 fetch 요청
```jsx
const queryClient = useQueryClient();

const registPost = async (postData) => await axios.post(`/api/post`, {postData})

const { data, isLoading, error } = useMutation(() =>registPost(postData), {
 onSuccess: () => () => queryClient.invalidateQueries(["fetchPosts"]),
});
```

useMutation의 두 번째 인자에 onSuccess를 정의하여 데이터 변경에 성공하면 queryClient의 invalidateQueries를 싱행하도록 했습니다.
`queryClient.invalidateQueries`는 인자로 Query key를 받아 해당 key로 관리하는 API를 재 호출합니다.
예제에서는 포스트 목록을 불러오는 Query key가 담겨있으므로 포스트 등록에 성공한다면 자동으로 포스트 목록 데이터를 최신화합니다.

 
예제에서 사용한 onSuccess 외에도 onError, onMutate, onSettled 와 같은 다양한 옵션이 존재합니다.
useMutation을 사용하며 이러한 옵션들을 잘 관리해준다면 간결한 로직으로 좋은 성능의 컴포넌트를 구현할 수 있을 것입니다.

 
 
 


## 🖐 마치며
이번 포스팅에서는 React Query의 기본 사용법에 대해서 정리해봤습니다.

 

React Query는 포스팅에서 정리한 기본적인 내용만으로도 높은 생산성의 개발을 진행할 수 있지만 캐싱 유지 시간을 설정하여 성능을 향상시킨다던가 API 요청 실패 시 재요청 횟수 설정 혹은 주기적인 API 요청으로 최신화된 서버 상태를 유지하는 등 추가적인 다양한 기능이 많이 있습니다.
그러니 개발할 때에는 공식 문서를 참고하여 더 좋은 성능의 컴포넌트들을 구현해보세요!

최근 팀 프로젝트를 진행하며 서버 상태를 관리하기 위해 React Query를 사용하기 시작했습니다.
그래서 본격적인 사용 전 기본적인 사용법들을 정리합니다!

 

## 🤔 React Qu

React Query로 서버 상태 관리하기