- 상태란?
- 상태 관리가 필요한 이유
- 주문 팀의 고민 및 해결
- React Query 살펴보기
- 3가지 core 컨셉
- 캐싱 및 동기화
- 마무리
문자열, 배열, 객체
등의 형태로 응용 프로그램에 저장된 데이터
→ 개발자 입장에서 관리해야 할 데이터
UI/UX의 중요성
의 향상수행하는 역할의 증가
=> 즉, 관리하는 상태가 많아지게 됨
상태를 관리하는 방법
을 모두 통틀어서 정의state의 증가 + state의 시간에 따라 변화하는 성질
다양한 상태 들의 조합
(변형) → 관리가 필요
Props Drilling
이슈다양한 상태
들의 등장그런 상태들을 관리
하기 위한 상태 관리 라이브러리들의 등장
API 통신 코드
의문점 3가지
server state
가 대부분client와 server state를 분리
하는 것이 어떨까?client state
와 server state
로 분리ex) 컴포넌트에서 관리하는 각각의 input value
)ex) database에 저장되어있는 데이터
)Ownership이 client와 server 라는 것
의 차이Server State를 위해서 활용
할 수 있는가 ?Server State를 관리 하기 적합
한가? → React Query를 사용
하자Fetch, cache and update data in your React and React Native applications all without touching any “global state”
React나 React Native
어플리케이션에서 어떠한 전역 상태의 터치 없이 데이터를 패칭, 캐싱, 업데이트
하도록 한다고 소개서버 데이터를 가져오고, 캐싱, 동기화, 업데이트 하는 기능
을 수행zero-config
로 즉시 사용가능, 원하면 config로 커스텀
도 가능컴포넌트가 마운트, 업데이트
되더라도 데이터 재 요청 X
요청 중
인 쿼리컴포넌트가 마운트, 업데이트
시 데이터 재 요청 O
특정 시간이 지나면 가비지 컬렉터(GC)에 의해 제거
1. npm
$ npm i @tanstack/react-query
2. yarn
$ yarn add @tanstack/react-query
3. cdn
<script src="https://unpkg.com/@tanstack/react-query@4/build/umd/index.production.js"></script>
App.tsx
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
최상위 컴포넌트 위에 QueryClientProvider로 감싸 줘야 함
prop
으로 client(QueryClient)
가 필요Queries
Mutations
Query Invalidation
GET
으로 받아올 대부분의 API에서 사용
데이터 Fetching
을 위해 사용Query Key
Query Function
1. Query Key
2. Query Function
언마운트된 후
어느 시점까지 메모리에 데이터를 저장하여 캐싱
할 것인지 결정 (default - 5분)fresh 상태에서 stale 상태로 전환
되는 시간컴포넌트 마운트 시 새로운 데이터 패칭
지정한 시간 간격 만큼 데이터 패칭
브라우저에 포커스가 없을 때 실행되지 않음
브라우저에 포커스가 없어도
refetchInterval에서 지정한 시간 간격만큼 데이터 패칭
컴포넌트가 마운트 되어도 데이터 패칭 x
refetch를 활용하여 데이터 패칭
이 가능 (enabled : false)데이터 패칭 성공
데이터 패칭 실패
원하는 데이터 형식으로 변환
병렬 처리
데이터 updating (POST, PUT, DELETE)
시 사용데이터 생성 및 수정, 삭제
모두에 사용import { useMutation } from '@tanstack/react-query';
const registerUserComponent = () => {
const registerUser = (user) => {
return axios.post('http://localhost:4000/user', user);
};
const { mutate: addUser, isLoading, isError, error } = useMutation(registerUser);
const handleCreateUser = () => {
const user = { 이름, 이메일, 비밀번호 };
addUser(user);
};
if (isLoading) {
return <h2>Loading...</h2>;
}
if (isError) {
return <h2>{error.message}</h2>;
}
}
import { useMutation } from '@tanstack/react-query';
const registerUserComponent = () => {
const queryClient = useQueryClient();
const registerUser = (user) => {
return axios.post('http://localhost:4000/user', user);
};
const { mutate: addUser, isLoading, isError, error } = useMutation(registerUser, {
onSuccess : () => {
// 캐시가 있는 모든 쿼리 무효화
queryClient.invalidateQueries();
// queryKey가 'user'로 시작하는 모든 쿼리 무효화
queryClient.invalidateQueries('user');
}
});
const handleCreateUser = () => {
const user = { 이름, 이메일, 비밀번호 };
addUser(user);
};
if (isLoading) {
return <h2>Loading...</h2>;
}
if (isError) {
return <h2>{error.message}</h2>;
}
}
<과정>
우아한 세미나
https://www.youtube.com/watch?v=MArE6Hy371c&t=634s
jkl1545 - react-query
https://velog.io/@jkl1545/React-Query#%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%9A%94%EC%B2%AD