팀프로젝트를 진행하면서 리액트쿼리를 사용하게 됐다.
초반에 개인 프로젝트를 진행하면서 zustand를 사용해보고 관련 영상을 찾아보다가 우연히 우아콘 영상을 보고 리액트쿼리에 관심을 가지고 있던차에 사용해 볼 수 있었다.
✨ 참고로 제가 봤던 영상은 이 영상입니다!
간단하게 어떻게 사용하는지 정리해두고 보면서 익숙하게 사용할 수 있도록 하려고한다.
📌
TanStack Query Docs
TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Motivation Mo
tanstack.com
리액트 쿼리(React Query)란?
리액트 쿼리는 서버의 상태를 불러오고 캐싱하며 서버 데이터의 동기화 및 업데이트를 보다 쉽게 할 수 있도록 도와주는 라이브러리이다.
리액트 쿼리 기능
- 쿼리(Query) - 데이터를 가져오는 요청으로 서버나 로컬 캐시에서 데이터를 가져올 수 있다.
- 뮤테이션(Mutation) - 데이터를 변경하는 요청으로 서버에 데이터를 추가, 수정 또는 삭제할 때 사용된다.
- 캐시(Cache) - 데이터를 캐싱하여 동일한 요청이 다시 수행될 때 서버로부터 데이터를 다시 가져오지 않고 캐시된 데이터를 사용할 수 있다.
- 인피니트 스크롤링(Infinite Scrolling) - 사용자가 스크롤할 때 추가 데이터를 동적으로 로드하여 페이지를 계속 확장하는 기능이다. (무한스크롤 구현)
- 서버 사이드 렌더링(Server Side Rendering, SSR) - 서버에서 데이터를 미리 가져올 수 있다.
- 최적화(Optimizations) - 데이터를 효율적으로 가져오고 관리하기 위한 다양한 최적화 기능을 제공한다.
리액트 쿼리 장점
- 단순성 - 간단하고 직관적인 API를 제공하여 사용자가 쉽게 데이터를 가져오고 관리할 수 있게 한다.
- 유연성 - 다양한 데이터 가져오기 및 관리를 하기위한 유연성을 제공한다.
- 성능 - 캐싱 및 최적화 기능을 통해 성능을 향상시킨다.
- 상태 - 가져온 데이터의 상태 관리를 통해 컴포넌트가 데이터의 상태 변화에 대응할 수 있도록 한다.
리액트쿼리 사용하기
설치
npm i @tanstack/react-query
pnpm add @tanstack/react-query
yarn add @tanstack/react-query
기본설정
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import Todos from './pages/Todos'
const queryClient = new QueryClient()
function App() {
return (
<QueryClientProvider client={queryClient}>
<Todos />
</QueryClientProvider>
)
}
- queryClient를 사용해 각종 상태를 저장하고 부가 기능을 제공
- QueryClientProvider로 감싸서 사용
useQuery
리액트쿼리에서 useQuery Hook은 HTTP 메서드에서 GET 요청과 같이 서버에 저장되어 있는 상태, 즉 데이터를 가져올 때 사용한다.
function Todos() {
const { isPending, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
if (isPending) {
return <span>Loading...</span>
}
if (isError) {
return <span>Error: {error.message}</span>
}
return (
<ul>
{data.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
)
}
- queryKey
- Query 요청에 대한 응답 데이터를 캐시할 때 사용할 Unique Key (✨필수)
- useQuery Hook은 요청마다 구분되는 고유한 key를 필요로 하는데 리액트쿼리는 이 queryKey로 서버 상태를 로컬에 캐시하고 관리
- queryFn
- Query 요청을 수행하기 위한 Promise를 리턴하는 함수 (✨필수)
💡 만약 함수의 queryKey가 변수에 의존하는 경우에는 어떻게 할까?
function Todos({ todoId }) {
const result = useQuery({
queryKey: ['todos', todoId],
queryFn: () => fetchTodoById(todoId),
})
}
- Todos 컴포넌트는 각각의 아이템이 가지고 있는 todoId라는 props을 받고 useQuery를 사용해서 해당 todoId의 아이템을 가져온다.
- 이때 queryKey는 쿼리를 고유하게 식별하는 문자열 배열이 포함되는데 위와 같이 'todos'는 쿼리의 종류나 데이터 유형을 식별하는 문자열이고 todoId는 각 아이템을 식별하는 변수이다.
- queryKey에 변수가 포함되면서 변수의 데이터를 캐시하고, 변경될 때마다 자동으로 다시 가져오게 된다.
📌
카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유
'Front-end > React' 카테고리의 다른 글
[React] react-date-range 라이브러리로 캘린더 만들기 (feat.date-fns) (0) | 2024.04.11 |
---|---|
[React] 리액트쿼리 useInfiniteQuery로 무한스크롤 구현하기 (0) | 2024.03.27 |
[React] react Swiper로 슬라이드 기능 구현하기 - 버튼 커스텀, breakpoints (0) | 2024.03.20 |
[React] 모달창 구현 - 라이브러리 없이 구현하기 vs Chakra UI 사용하기 (0) | 2024.03.12 |
[React] Redux Middleware는 어떤 용도로 사용될까? (0) | 2024.01.18 |