TIL | React (React query, 옵셔널 체이닝 ... )

23.07.12

1. React query

React query : Redux-thunk, Redux-saga에 이은 또 다른 Redux 미들웨어

비동기 (통신) 데이터 관리를 위해 Redux-thunk, Redux-saga 등 미들웨어를 사용했지만, (1) 보일러 플레이트(= 미들웨어를 적용하기 '위해' 적어야하는 코드량이 많음) (2) 규격화 문제(= 리덕스가 비동기 데이터 관리를 위한 전문적인 라이브러리는 아니어서) 와 같은 문제가 있었음
=> 그로인해 더 전문적이고 fit한 React query가 나옴

Q. react-query와 redux-thunk 중 react-query를 사용한 이유는 ?
A. redux-thunk의 보일러 플레이트가 불편해서, 그런데 react-query를 사용하면 이런 불편한 점이 없어지고 코드가 비교적 간단해짐
(ex. thunk에서는 {data, isLoading, isError}를 우리가 지정해줬지만 query에서는 api 내부에서 {data, isLoading, isError} 값을 제공해주고 있어 우리는 갖다 사용하기만 할 수 있음)
또한 react-query는 '이미 읽어왔던 데이터'에 대해 '캐싱 처리'를 해줘서 별도에 DB 통신없이 데이터를 가져올 수 있음
=> 이는 React query의 강점 !

yarn add react-query 명령어로 패키지 설치 필요
QueryClientProvider : 데이터를 읽어오는 기능(QueryClient)을 애플리케이션 전체에 주입하도록 하는 API

주요 키워드

1. Query (의문) : 어떤 데이터에 대한 요청을 의미 = axios의 get 요청과 비슷
2. Mutation (변형) : 어떤 데이터(= 데이터 그룹 그 자체)를 변경함(= 추가, 수정, 삭제 ‘CUD’)을 의미 = axios의 post, put, patch, delete 요청과 비슷
3. Query Invalidation (무효화) : Query를 무효화 시킨다 !? => 기존에 있던 query는 서버 데이터이기 때문에 데이터의 변경이 생긴다면 최신 상태가 아니므로, 기존의 query를 무효화 시키고 최신화 시키는 것을 의미
   => ex. 새로고침해야 반영되는 등 ….

1-1. useQuery

useMutation 기본형

import { useQuery } from "react-query";

const { data, isLoading, isError } = useQuery("queryKey", function);

• useQuery() 훅은 인자로 (1) 유니크한 "query Key"와 (2) 비동기 function 2가지를 받음
• useQuery는 별도의 옵션이 있지 않은 이상 컴포넌트가 렌더링되는 시점에 자동으로 요청이 시작됨

1-2. useMutation

useMutation 기본형

import { useMutation } from "react-query";

const { data, isLoading, mutate } = useMutation(mutationFn, options);

• useMutation() 훅은 인자로 (1) mutate를 위한 함수와 (2) options(생략 가능) 2가지를 받음 (useQuery() 처럼 key값이 따로 없음)

• 함수 부분 인자 : GET을 제외한 POST, PUT, DELETE 및 각 요청에 필요한 함수들이 들어감

• options 부분 인자 : 앞에 'on'이라고 붙은 onMutate onSuccess onError onSettled 와 같은 속성들이 들어감

invalidateQueries 사용

  const queryClient = useQueryClient();
  const Mutation = useMutation(addTodo, {
    // value 자리에 함수
    onSuccess: () => {
      // 무효화 시킬 query key값을 인자에 넣어줌
      queryClient.invalidateQueries("diaries");
    },
  });

+) 비동기 함수에서는 반드시 return을 해줘야 함

참고링크
참고링크

---

2. 옵셔널 체이닝

옵셔널 체이닝