프론트엔드 개발에서 API 통신과 비동기 데이터 관리는 절대 빼놓을 수 없다. 서버 데이터 요청/관리를 위해 다양한 라이브러리들이 사용되고 있는데, 오늘은 가장 대표적인 라이브러리 중 하나인 React Query에 대해 알아보자.
왜 react query를 사용하는가?
- ReactApplication에서 서버 상태를 불러오고, 캐싱하며 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리
2.다른 데이터 불러오기 방식에서는 상당히 복잡하고 장황한 코드가 필요하지만, 리액트 쿼리는 react component 내부에서 간단하고 직관적으로 api를 사용할 수 있다.
3.리액트 쿼리에서 제공하는 캐싱,window focus refetching 등 다양한 기능을 활용하여 api 요청과 관련된 번잡한 작업 없이 핵심로직에 집중할 수 있다.
redux
리액트 쿼리 도입 이전에 - 현재까지도 많이들 사용하는 - Redux가 있었다. 그외에도 redux-thunk, redux-saga 같이 비동기 미들웨어가 있었다.
사용법
- 리액트 쿼리 사용을 위해
QueryClientProvider를 최상단에서 감싸주어야 한다. - 쿼리 인스턴스를 생성 후
client={queryClient}를 작성해준다.
import axios from 'axios'
import {QueryClient, QueryClientProvider} from 'react-query'
const queryClient = new QueryClient()
export default function App(){
return(
<QueryClientProvider client={queryClient}>
<Home/>
</QueryClientProvider>
)}리액트쿼리는 API 요청을 Query와 Mutation 이라는 두 가지 유형으로 나누어 생각한다.
Query
useQuery 훅으로 수행되는 query 요청은 http method GET 요청과 같이 서버에 저장되어 있는 "상태"를 불러와 사용할 때 사용한다
const {data}=useQuery(queryKey, fetchFn, options)- queryKey: Query 요청에 대한 응답 데이터를 캐시할 때 사용할 unique Key (required)
- fetchFn: Query 요청을 수행하기 위한 Promise를 리턴하는 함수 (required)
- options: useQuery에서 사용되는 Option 객체 (optional)
리액트 쿼리의 useQuery Hook은 요청마다(API마다) 구분되는 unique Key를 필요로 한다. 이 unique Key로 서버상태를 로컬에 캐시하고 관리하기 때문이다.
function Users(){
const {isLoading, error, data} = useQuery('userInfo',//userInfo를 key로 사용하여 데이터 캐싱
// 다른 컴포넌트에서 userInfo를 queryKey로 사용한 useQuery Hook이 있다면 캐시된 데이터를 우선 사용한다.
()=> axios.get('/users').then({data}=>data),
)
if (isLoading) return <div>로딩중...</div>
if (error) return <div>{error.message}</div>
Mutation
useMutation Hook으로 수행되는 Mutation 요청은 http method POST, PUT, DELETE 요청과 같이 서버에 side effect를 발생시켜 서버의 상태를 변경시킬 때 사용한다. 첫번째 파라미터는 이 mutation 요청을 수행하기 위한 promise를 리턴하는 함수이며, useMutation의 리턴값중 mutate를 호출하여 서버에 side effect를 발생시킬 수 있다.
const {mutate} = useMutation(
mutationFn, //이 mutation 요청을 수행하기 위한 promise를 리턴하는 함수(required)
options, // useMutation에서 사용되는 option 객체(optional)
)참고 사이트
familyman80.log님의 벨로그
hyolog님의 벨로그
카카오페이 기술블로그
[React] react-query, 리액트 쿼리를 사용해야 하는 이유
