[RTK Query] 생활코딩 강의 정리

최예린·2022년 12월 28일
1

React

목록 보기
19/19
post-thumbnail

RTK Query 요약

Hook 기본 사용법과 특징

use~Query

읽기전용 use~Query는 자동으로 실행됩니다.

const query = api.useGetCountQuery({name});
query.isLoading
query.isFetching
query.data
...
  • console.log(query)

12:00 isLoading과 isFetching의 차이

  • isLoading, isFetching : true -> 현재 서버로부터 데이터를 가지고 오고 있다.
  • isLoading : 컴포넌트 최초 초기화시에만 true
  • isFetching : 서버와 통신할때마다 true

use~Mutation

쓰기전용 user~Mutation은 수동으로 실행해야하며, Hook을 실행하면 배열을 리턴합니다. 이 배열의 첫번째 원소가 함수입니다.

const mutation = api.useSetCountMutation();
const setCount = mutation[0]; // 함수
console.log(mutation[1].isLoading); // isLoading

배열의 두번째 원소에는 isLoading이 포함되어있습니다. Mutation에서는 Query와 다르게 서버와 통신할 때마다 isLoading이 변경됩니다. ★ use~Mutation은 isFetching이 없습니다.

18:00 Promise로 응답값 받기

setCount 함수는 Promise를 리턴합니다. setCount로 서버에있는 데이터의 값을 변경한 경우 변경 직후 바로 응답 값을 result로 받아서 사용할 수 있습니다. Promise는 ascync 함수 내에서만 사용이 가능하고 a

<button
	onClick={async () => {
    	const result = await setCount({ name, value: query.data + 1 });
      	console.log("result", result);
}}
>
  {query.isFetching ? "Fetching..." : ""}
  {query.data}  
</button>

Create API : Hook 만들기

21:00 ~

  • getCount : 서버 캐시. 업데이트 정책을 정의할 수 있습니다.

  • useGetCountQuery : createApi가 서버캐시를 가지고 자동으로 만들어준 Hook

  • api

  • useGetCountQuery의 매개변수로 전달 -> query에서 사용

  • useSetCountMutation의 첫번째 인자인 함수 setCount의 매개변수로 전달 -> query에서 사용

Tag

서버의 데이터를 변경한 뒤 원래는 수동으로 새 값을 가져오는 작업을 해야합니다. 하지만 RTK Query에서는 그 작업을 자동으로 해줍니다. 그때 사용하는 것이 바로 Tag입니다.

  • 30:37

구독중인 컴포넌트의 값이 비어있으면 RTK Query가 자동으로 서버에서 값을 가져와서 Cache를 채워넣습니다. Cache를 구독하고있던 모든 컴포넌트들이 새로운 값을 가져가서 화면에 그려줍니다.


Mutation을 이용해서 값을 2로 바꿨을 때, "counter" 라는 태그를 갖고 있는 경우 "counter" 태그를 갖고있는 Cache의 값을 지워버립니다. 그러면 값이 빈 상태가 되고 다시 서버에서 새로운 값을 가져오게됩니다.

두개 컴포넌트가 하나의 캐시를 구독하는 경우



하나의 캐시를 두개의 구독자가 구독하는 경우 하나를 변경하더라도 나머지하나도 같이 변경됩니다.

Tag 사용방법

  • tagTypes: ["Count"];: 전역적으로 이 API에서 사용하는 태그들을 등록해줍니다.

  • ProvidesTags: 태그를 부여합니다.
    result, error, arg: 데이터 값, 에러, use~Query()의 매개변수이며 이 값들을 사용하여 tag를 설정합니다.

  • invalidatesTags: 무효화한다는 뜻으로 해당 태그를 갖고 있는 캐시를 삭제한다는 뜻입니다.
    result, error, arg: 데이터 값, 에러, use~Mutation() 첫번째 인자 함수의 매개변수

Redux 없이 RTK Query 사용

38:00~
https://redux-toolkit.js.org/rtk-query/api/ApiProvider

import * as React from 'react';
import { ApiProvider } from '@reduxjs/toolkit/query/react';
import { Pokemon } from './features/Pokemon';

function App() {
  return (
    <ApiProvider api={api}>
      <Pokemon />
    </ApiProvider>
  );
}

ApiProvider로 감싸고 api를 전달합니다.

Redux와 RTK Query 사용

  • 앱을 Provider 로 감싸고 store를 등록해줍니다.
  • reducer에 api.reducer를 직접 등록해주어야합니다.
  • middleware 코드를 추가해줍니다.
  • reducerPath는 "api"가 default 값이며 생략가능하지만, 여러개의 baseUrl을 사용해서 createApi를 여러번 사용하는 경우 이름을 구분해주는 것이 좋습니다.
profile
경북대학교 글로벌소프트웨어융합전공/미디어아트연계전공

0개의 댓글