[TIL] 프리온보딩 14일차 - 220516

이번주는 5인이서 팀 과제를 하는데 redux-toolkit이나 react-query를 사용해본 경험이 없어서 공부하고 프로젝트를 진행하기로 하였다..!

---

1. react-query

1️⃣ react-query 사용 방법

- react-query를 설치한다.

yarn install react-query

 

- src > index.js에서 react-query를 사용할 수 있도록 태그를 감싸준다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools initialIsOpen={true} />
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

---

2️⃣ useQuery()

- 데이터 GET 하기 위한 API

- useQuery(unique Key, 비동기함수, 옵션값)

- unique Key는 string과 배열을 받습니다.

  ( 배열로 작성 시 [다른 Component에서 부를 string값, query함수 내부에서 사용할 변수명] )

- refetchOnWindowFocus : 사용자가 현재 사용 하는 창에서 다른 창으로 갔다가 다시 돌아왔을 때의 함수 재실행 여부

- retry: API 호출 실패 시 함수 재호출 횟수

 

💡 useQuery() 옵션값에 enabled 옵션을 넣으면 useQuery()를 동기적으로 사용할 수 있다 !

- enabled: true가 되면 useQuery 실행

---

3️⃣ useQueries()

- 한 컴포넌트 안에서 여러개의 useQuery()가 있다면 사용 (useQuery()를 여러개 써도 가능하긴 함)

- loadingFinishAll이 false면 모든 함수 호출이 끝난 것이다.

- queryKey를 배열로 작성하면 queryFn 안에서 변수(params)로 사용이 가능하다.

---

4️⃣ useMutation()

- 값을 바꿀 때 사용하는 API

- success에 queryClient.invalidateQueries()를 작성하면 update 후에 get 함수를 재실행할 수 있다.

- 작성법 : queryClient.invalidateQueries(get함수명)

 

💡 만약 mutation()에서 return값을 get함수의 파라미터로 넘기고 싶다면 queryClient.setQueryData() 사용 !

---

5️⃣ Suspense

- suspense를 사용하여 에러 핸들링을 더욱 직관적으로 할 수 있다.

---

⭐ 참고 사이트

react-query 개념 및 정리

 

react-query에 typescript 적용하기 - 리액트 쿼리, 타입스크립트

---

2. redux-toolkit 참고 사이트

Redux 시작하기 | Redux

 

Redux Toolkit을 사용하여 간단하게 상태 관리하기,reselect, redux, react, immer, redux-action, FSA, react-redux 사