2024.2.22 기록 (react-query)

리액트 미들웨어

청크 (thunk)

쿼리 (react-query)

 

오늘은 이 중에서 리액트 쿼리에 대해서 알아보는 시간을 가졌다.

청크에 비해서 굉장히 짧고 편함..

 

 

핵심

query = Read

mutation = Create, Update, Delete

query Invalidation = 이전 값 무효화 = 최신데이터로 갱신함

선행되어야 모듈 설치
yarn add axios 
yarn add json-server

실행하기 
yarn json-server --watch 파일.json  --port 포트

 

상위 컴포넌트에 redux provider 를 설정했던 것처럼 설정해주기

 

 

const 쿼리클라이언트 = new QueryClient();

<QueryClientProvider client = {쿼리클라이언트}>
	<app />
</QueryClientProvider>

 

이렇게 되면 작업 전역에서 사용이 가능하다.

DB를 별도로 분리하고 (api 폴더같은 경로를 별도로 생성하고 관리한다.)

그곳에 axios(fetch등등..) CRUD 기능을 이용해서 받아오고,

사용할 곳에서 쿼리를 사용한다.

• 사용처에서 비동기 함수를 사용한다면 길어져서 유지보수가 어려워지게 된다.

---

useQuery

useQuery는 DB의 데이터를 불러오고 isLoading, isError, data를 지원하는데 이것은 Promise의

pending reject fulfilled 상태와 비슷하게 여길 수 있다.

 

const {isLoading, isError, data} = useQuery('쿼리key', 비동기 함수)

 

extraReducers 에 사용하던 길었던 코드가 한 줄로 대체가 되는 것이다.

 

---

useMutation

mutation은 DB 데이터의 변경을 의미하는데,

DB에 추가, 삭제, 변경과 같은 기능을 지원한다.

 

const queryClient = useQueryClient();

const 뮤테이션 = useMutation (함수, {조건})

 

여기서 객체의 조건에는 각각 성공, 실패 했을 때의 조건이 들어가게 된다

 

 

const mutation = useMutation (비동기함수, {
	onSuccess : () =>{
....

기능 사용처에서 mutation.mutate(대상)

 

 

그런데, 이렇게 하면 DB만 갱신이 되고, 페이지를 새로고침 했을 때 데이터가 올바르게 표기되게 된다.

(아니면 다른 리랜더링의 조건을 충족하거나)

 

이럴 때 query Invalidation 을 사용하면 된다.

 

 

const mutation = useMutation (비동기함수, {
	onSuccess : () =>{
		queryClient.invalidateQueries('쿼리key')
....

기능 사용처에서 mutation.mutate(대상)

 

 

쿼리key를 통해서 성공시 쿼리key를 추적하여 해당 데이터를 갱신한다.

refetching이라고 하며, 캐싱처리에도 사용된다.

 

 

유의사항

• 최상단 컴포넌트에서 QueryClientProvider를 이용한 설정이 필요하다.

 

• useQuery에 입력된 쿼리key를 통해서 이루어지는 과정이기 때문에 이 쿼리key는 중복되면 안 되는 유니크한 값이어야 한다.

 

• mutation.mutate() 는 반드시 하나의 변수, 객체만을 인자로 가지며,
  idle, isLoading, isError, onSuccess 의 결과를 주고,
  onSuccess의 값이 갱신(리랜더링)을 요구한다면 invalidation 기능을 사용하여 refetching 해준다.

 

그런데 이렇게 사용하다보니까 RTK(Redux ToolKit) 과 함께 사용해야하는 지 궁금해졌다..