한동안 플러터에게 뚜드려 맞다가 오랜만에 리액트로 돌아왔습니다🥲
어드민 페이지 인수인계를 받고 코드를 살펴보던 중 이전에 프로젝트를 하면서 제대로 다뤄보지 못했던 내용들을 당분간 기록해 볼 예정이다.
그 중에서 오늘 다룰 내용은 React Quert!
📌 React Query?
React-Query는 react애플리케이션에서 서버의 상태를 불러오고 캐싱하며, 서버 데이터와의 지속적인 동기화 및 업데이트하는 작업을 쉽고 간단하게 할 수 있도록 도와주는 라이브러리이다.
전역상태를 건드리지 않고도 가능하다는 점이 큰 장점!
장단점 및 핵심기능
- 데이터 캐싱 기능
- 동일한 데이터에 대한 중복 요청 제거
- 데이터 업데이트 신속 반영
- 페이지네이션 및 데이터 지연 로드와 같은 성능 최적화
- 서버 상태의 메모리 및 가비지 수집 관리
- 백그라운드 업데이트 및 오래된 데이터 처리
- 간단한 사용
대부분의 상태 관리 라이브러리들은 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업에는 좋지 않은 경우가 있다. 하지만 react-query는 서버 상태를 관리하기 위한 최적의 라이브러리 중 하나이다!
설치 방법
yarn add react-query📌 useQuery / useMutation
React Query의 API요청은 query와 mutation 이라는 두 가지 유형으로 나누어 생각할 수 있다.
useQuery
useQuery훅으로 수행되는 쿼리 요청은 http method get요청과 같이 서버에 저장되어 있는 상태를 불러와 사용할 때 사용한다.
useQuery훅은 두 개의 매개변수를 받는다.
1. 쿼리키
2. fetchData 쿼리 함수
=> 쿼리키는 쿼리를 식별하고 캐시하기 위해 사용한다. 쿼리 함수는 쿼리를 실행하거나 refetch해야 할 때마다 호출된다. 비동기 함수나 프로미스 기반 함수로 작성할 수 있으며 데이터를 가져오는 로직을 처리한다.
리액트 쿼리는 캐싱이나 refetch등은 자동으로 처리한다.
카카오페이 tech 블로그의 예시를 살펴보자!
function Users() {
const { isLoading, error, data } = useQuery(
'userInfo', // 'userInfo'를 Key로 사용하여 데이터 캐싱
// 다른 컴포넌트에서 'userInfo'를 QueryKey로 사용한 useQuery Hook이 있다면 캐시된 데이터를 우선 사용합니다.
() => axios.get('/users').then(({ data }) => data),
);
// FYI, `data === undefined`를 평가하여 로딩 상태를 처리하는것이 더 좋습니다.
// React Query는 내부적으로 stale-while-revalidate 캐싱 전략을 사용하고 있기 때문입니다.
if (isLoading) return <div> 로딩중... </div>;
if (error) return <div> 에러: {error.message} </div>;
return (
<div>
{' '}
{data?.map(({ id, name }) => (
<span key={id}> {name} </span>
))}{' '}
</div>
);
}- 위의 예시에서
userInfo가 쿼리키로 사용된다. - 쿼리 함수의 경우 위 예시처럼 axios를 사용해도 되며 fetch함수를 사용해도 무방하다!
쿼리 상태
위의 코드를 살펴보면 useQuery는 isLoading, error, data, isError등의 속성을 반환하는 것을 알 수 있다. 이러한 속성은 쿼리의 상태를 의미한다.
반환받은 상태값을 보고 로딩, 에러 등의 로직을 처리할 수 있다.
리액트 쿼리를 사용하지 않고 데이터 패치를 했을 경우 useState를 사용해 상태를 관리해줘야 하지만 useQuery에서는 이런 상태를 모두 제공해준다!
다르게 사용하면 status를 사용할 수도 있다.
function Users() {
const { status, error, data } = useQuery(
'userInfo', // 'userInfo'를 Key로 사용하여 데이터 캐싱
// 다른 컴포넌트에서 'userInfo'를 QueryKey로 사용한 useQuery Hook이 있다면 캐시된 데이터를 우선 사용합니다.
() => axios.get('/users').then(({ data }) => data),
);
// FYI, `data === undefined`를 평가하여 로딩 상태를 처리하는것이 더 좋습니다.
// React Query는 내부적으로 stale-while-revalidate 캐싱 전략을 사용하고 있기 때문입니다.
if (status === 'isLoading') return <div> 로딩중... </div>;
if (status === 'error') return <div> 에러: {error.message} </div>;
//생략이런식으로!!
useMutation
useMutation훅으로 수행되는 요청은 http method post, put, delete 와 같이 서버에 데이터 업데이트와 관련된 요청을 보내 서버의 상태를 변경시키는 경우 사용한다.
useMutation의 파라미터로는 이 요청을 수행하기 위한 Promise를 리턴하는 함수이다.
useMutation도 mutate, isLoading, isError, error 등의 속성을 반환하고 이를 사용해 상태 처리를 할 수 있다!
useMutation의 리턴값 중 mutate를 함수를 호출함으로써 서버에 side effect를 발생시킬 수 있다.
예시를 봐보자! (ts 활용)
import { useMutation } from "react-query";
import axios from 'axios';
interface TodoType {
id: number;
todo: string;
}
const addTodo = async (newTodo: TodoType): Promise<TodoType> => {
const { data } = await axios.post<TodoType>(`/todos`, newTodo);
return data;
};
// api 요청하는 함수(addTodo) 를 작성했을 경우
// 따로 작성하지 않고 화살표 함수 사용도 가능
const { mutate, isLoading, isError, error, isSuccess } = useMutation(addTodo);
export default function App() {
return (
<div>
{
isLoading ? ('로딩중일때') : (
<>
{isError && <p>error: {error.message}</p>
{isSuccess && <p>성공했을때</p>}
<button
onClick={() => {
mutate({ id: 1, todo: '요청보낼때' })
}}
> Click
</button>
//.. 생략useMutation의 특이한 점으로는 실제 서버 응답이 수신되기 전에 성공에 대한 가정으로 사용자 인터페이스가 미리 업데이트된다는 점이 있다. 사용자에게 즉각적인 피드백을 제공해 보다 원활하고 반응이 빠른 사용자 경험을 제공할 수 있다는 장점이 있다!!
기본적인 간단한 사용법에 대해 알아보았지만 처음 써보니 너무 어려운 거 같다,,
상태나 옵션들의 경우 필요할 때 공식문서를 찾아보면서 조금씩 익히면 좋을듯!
커스텀 방법, 쿼리 다루기 등등 심화 내용은 개발을 하면서 익혀보고 다시 포스팅할 예정이다 :) _끝
🔗 참고 링크
React Query 한글 메뉴얼
카카오페이 FE개발자들이 React Query를 선택한 이유
React Query강좌
