리액트 쿼리!
웅서트 프론트엔드 스터디, 두 번째 주제 - 리액트 쿼리
리액트 쿼리를 익혀 API를 편하게 핸들링 해보자!!
What - 리액트 쿼리란 무엇인가
리액트 애플리케이션에서 상태와 데이터, 비동기 처리를 용이하게 해주는 라이브러리
이름처럼 리액트 환경에서 서버/클라이언트 스테이트 관리를 포함한 다양한 비동기 작업을 도와주는 라이브러리이다.
When - 리액트 쿼리는 언제 쓰는가
리액트 쿼리를 사용하는 이유를 알아보기에 앞서, 더욱 근본적인 궁금증을 해결하고 가야한다.
리액트 쿼리는 언제 써야할까
클라이언트 스테이트 < 서버 스테이트
클라이언트 스테이트보다 서버 스테이트의 처리가 더 많을때 사용한다.
이게 무슨 말이냐?
리액트 쿼리는 비동기 처리를 도와준다. 즉, 서버로부터 오는 데이터들을 (많이)처리해야 할 때 사용하는 것이다.
Why - 리액트 쿼리는 왜 쓸까
그럼 리액트 쿼리가 어떻게 비동기 작업을 도와주길래 사용하는 걸까?
리액트 쿼리의 장점(사용하는 이유)는 크게 아래와 같다.
-
쉬운 API 호출
-
데이터 캐싱
-
자동 상태관리
-
성능 최적화
(+ 리액트 친화적이다 = 문법이 유사하다 = 친근하다)
단점 아닌 단점
작은 규모의 프로젝트에서 샤용하면 오히려 복잡해진다.
How - 리액트 쿼리는 어떻게 쓸까
설치
npm i @tanstack/react-query
npm i @tanstack/react-query-devtools // 데브툴yarn
yarn add @tanstack/react-query
yarn add @tanstack/react-query-devtools // 데브툴초기 세팅하기
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
const App = () => {
return (
<QueryClientProvider client={queryClient}>
<div className="App" />
<ReactQueryDevtools initialIsOpen={true} />
</QueryClientProvider>
)
}Provider로 감싸서 적용하는 방식.. 어디서 많이 본 방식이다..
앞으로 계속 보게될 방식이다.
hooks
useQuery
- get API 요청을 수행하기 위한 hook
- 반환값
- 기본적으로 비동기 처리(
enabled키워드롤 사용해 동기적으로 사용 가능)
파라미터
- UniqueKey : 해당 쿼리의 고유 식별자
- QueryFunction : 쿼리에 사용할 promise 기반의 비동기 API 함수 (API 요청 보내는 함수)
- options : 쿼리에 사용할 옵션
반환값
반환값을 상태로 할당시켜 사용할 수 있다.
const Todos = () => {
const { isLoading, isError, data, error } = useQuery("todos", fetchTodoList, {
refetchOnWindowFocus: false, // 재방문시 재실행 여부
retry: 0, // 실패시 재시도 횟수
onSuccess: data => {
console.log(data);
},
onError: e => {
console.log(e.message);
}
})
};- data: fetch한 데이터. 데이터가 fetch될 때까지 undefined 의 값을 가진다.
- status: 쿼리의 상태. "loading", "error", 혹은"success"의 세가지 종류가 있다.
- error: 발생한 오류. 발생한 오류가 없다면 undefined 의 값을 가진다.
- isFetching: 쿼리가 fetching 중인지 여부를 나타내는 값으로 Boolean 값을 가진다.
useQueries
여러개의 useQuery를 사용해야할 때,
복수의 useQuery를 하나로 묶어서 사용할 수 있다.
const result = useQueries(
queries : [
{
queryKey: "get11", riot.version,
queryFn: fn1
},
{
queryKey: "get22",
queryFn: fn2
}
])useMutation
- useQuery 와 다르게 useMutation은 데이터를 생성 / 업데이트 / 삭제 할 때 사용 된다.
기본 구조는 아래와 같다.
import { useMutation } from "react-query";
// 더 많은 return 값들이 있다.
const { data, isLoading, mutate, mutateAsync } = useMutation(Promise처리함수, options);
mutate(variables, {
onError,
onSettled,
onSuccess,
});mutate
mutate는 useMutation을 이용해 작성한 내용들이 실행될 수 있도록 해준다.
처리된 값을 저장해주거나 특정 이벤트를 발생시켜줄 수 있다.
흠..
리액트 쿼리에 대해 알아보았다.
리액트를 사용할 수 있는 사람이라면 대체로 어려움 없이 사용할 수 있는 것 같다.
접근성에 비해 상당히 유용하다는 생각이 든다.
mutate는 워낙 다양하게 사용할 수 있어서 그런지 뭐라고 딱 잘라서 설명하기가 힘든 것 같다.
