0. 주제 선정하게 된 배경 :
영화 예매 프로젝트에서 상태 관리를 redux toolkit으로만 사용했는데
서버 데이터인지 클라이언트 데이터인지에 따라 구분해서 redux toolkit과 react query를 사용하고자
리팩토링할 예정이다. 리팩토링에 앞서 리액트 쿼리는 이전에 useQuery를 공부했었던
"로그인 여부"나 "로딩중인지"를 알아내는 용도를 넘어서 좀 더 깊게 공부하고자 한다
1. 제대로 알고 넘어가기 :
1-1. redux toolkit vs react query
: 내 벨로그에서 여러차례 언급한적이 있지만, 프로젝트를 하나 끝내고 나니 둘 차이가 확실히 구분이 어느 정도 되는 것 같다.
- react query: 서버 데이터 상태 관리
- redux toolkit: 클라이언트 데이터 관리
1-2. react query 사용법
1-2-1. 설치하기
npm i @tanstack/react-query
npm i @tanstack/react-query-devtools1-2-2. QueryClientProvider로 감싸주기
: react query를 사용하길 바라는 컴포넌트를 감싸주면 됨
보통은 가장 상위 컴포넌트를 감싸주는 듯
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById('root')).render(
<QueryClientProvider client={queryClient}>
<App />
<ReactQueryDevtools initialIsOpen={true} /> // reactquery는 자체적인 개발자도구를 제공 (최상단에 위치해야함!)
</QueryClientProvider>,
)1-2-3. 가져오기 (패칭하기)
useQuery훅은 서버로부터 데이터를 가져옴(패칭)
- useQuery는 다양한 값들을 제공해주는 데 그 중에서 자주 쓰이는 건 : isLoading, error, data
- useQuery에 객체를 전달해줘야 하는데 필수로 전달해줘야 하는 건 : queryKey, queryFn
const {isLoading, error, data[, 다른 옵션들은 공식 문서 참고]} = useQuery({
queryKey,
queryFn,
// ... 다른 옵션들은 공식 문서 참고
})1-2-4. 캐싱하기
: useQuery훅은 서버로부터 데이터를 가져오는 동안 캐싱되어서 이전에 가져온 데이터를 재사용할 수 있음
[캐싱의 장점]
1. 성능 향상
: 동일한 데이터를 다시 불러올 필요 없이 캐시된 데이터를 사용해서 성능을 향상시킴
2. 네트워크 사용량 감소
: 동일한 요청을 반복해서 보내지 않으므로 네트워크 사용량을 줄일 수 있음
3. 오프라인 지원
: 캐시된 데이터는 오프라인 상태에서도 사용할 수 있어서 사용자가 네트워크에 연결되어 있지 않아도 앱을 계속 사용할 수 있음
4. 자동 캐시 유효성 검사
: 데이터가 캐시되어 있는 동안 자동으로 유효성 검사를 하고 필요에 따라 데이터를 다시 불러와 갱신 (useQuery의 세 번째 매개변수인 staleTime로)
2. 참고 사이트
삐약