RTK Query

이번 wayc 이커머스 프로젝트를 리팩터링 하는 과정에서 Redux Toolkit을 적용하기로 했다. 그 과정에서 통신을 어떤 방식으로 할지 많이 고민을 했다. 요즘 유행하는 것이 React Qeury, RTK Query, SWR 등이 있다. React Query는 팀원 모두가 다른 프로젝트에서 사용해 봤고, SWR은 맨 처음에 만드는 과정에서 사용했다. SWR은 Next JS에 좀 더 잘 어울린다는 말이 있기에 이번에는 RTK Query를 사용해 보기로 했다!

(이번 글은 https://www.youtube.com/watch?v=pnpO3o8mLBU&t=1626s 생활코딩님의 유튜브 강의를 보고 작성한다. 생활코딩님께 감사드린다!!)

실습 코드 링크

https://codesandbox.io/s/rtk-query-example-ntsxxn

RTK-query example - CodeSandbox

RTK Query의 기본 설명

RTK Query는 Reqct-query, SWR과 비슷한 라이브러리이며, Redux에 포함되어 있지만 Redux와 같이 사용하지 않아도 된다.

use~Query와 use~Mutation

use~Query

• use~Query는 읽기 전용이며, 객체를 리턴한다.
• data, isFetching, isLoading이 중요하고 자동실행이된다.
• isFetching은 서버랑 통신할 때마다 실행된다, 즉 로딩할 때 사용된다. isFetching이 true가 되면 서버로부터 data를 다 가져온다.
• isLoading은 최초의 한 번만 실행된다, 즉 isLoading은 컴포넌트를 최초로 초기화할 때 사용한다.

-isLoading의 예시

이 부분은 컴포넌트가 최초에 실행될 때(새로고침), Loading을 보여준다.

 

-isFetching의 예시

서버와 통신하는 과정을 사용자에게 보여주면 더 좋은 UX를 제공할 수 있기에 isFetching을 활용한다.

use~Mutation

• use~Mutation은 쓰기 전용이며, 배열을 리턴한다.
• 자동 실행되지 않고 첫 번째 원소 함수로 수동 실행된다.
• mutation은 isFetching이 없고 isLoading만 있다.

-수동 실행 예시

const mutation = api.useSetCountMutation();
const setCount = mutation[0];

이런 식으로 0번째 인덱스에 함수가 있다.

응답 결과를 바로 보고 싶으면 async await을 사용하면 된다.

 

-isLoading의 예시

mutation의 두 번째 원소에 isLoading이 들어있다.

createApi

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: "https://example.com/api" }),
  tagTypes: ["Count"],
  endpoints: (builder) => ({
    getCount: builder.query({
      query: ({ name }) => `count/${name}`,
      providesTags: (result, error, arg) => {
        console.log(result, error, arg);
        return [{ type: "Count", id: arg.name }];
      }
    }),
    setCount: builder.mutation({
      query: ({ name, value }) => {
        return {
          url: `count/${name}`,
          method: "POST",
          body: { value }
        };
      },
      invalidatesTags: (result, error, arg) => [{ type: "Count", id: arg.name }]
    })
  })
});

baseQuery

baseQuery에서 baseUrl에 서버 주소를 적어주면 된다.

endpoints

GET, POST, PATCH, DELETE 등을 하는 것들을 endpoints라고 부른다.

위 코드에서는 getCount로 서버 캐시를 지정한 것이고 build.query로 지정하면 서버에서 데이터를 어떻게 가져오는가를 정한 정책이다. 그리고 query 프로퍼티 안에는 url이 와야 한다. 이렇게 가져온 데이터를 useGetCounterQuery 훅을 자동으로 만들어서 서버 캐시를 갱신할 수 있다.

=> 즉, createApi는 서버 캐시를 갱신할 수 있는 훅을 자동으로 만들어주는 제너레이터이다!

mutation

query 프로퍼티에 함수를 지정해 주면 된다.

마찬가지로 url이 필요하며, method와 서버에 전달할 데이터인 body를 넣어주면 된다.

tag

useSetCountQuery 훅을 사용하면 count를 업데이트한다. 그리고 다시 fresh 한 데이터를 가져오는 작업을 RTK Query를 통해서 해줘야 한다. 이를 tag를 이용해서 하면 된다.

 

1. 브라우저에서 서버 캐시(여기선 GetCount)의 값을 캐시하고 있고 이 캐시를 컴포넌트가 구독하고 있다.
2. 만약 구독 중인 캐시가 비어있으면 RTK query는 자동으로 서버로부터 값을 받아와 캐시를 채워준다. 그러면 캐시를 구독 중이던 컴포넌트가 캐시가 바뀐 것을 감지하고 리렌더링이 일어난다.
3. mutation를 통해 값을 업데이트하면 서버 쪽에서는 당연히 값이 변경되지만, 클라이언트에서는 값의 변경이 일어나지 않는다. 이를 태그를 이용해서 해결할 수 있다. 태그를 붙여놓으면 mutation 훅으로 update 후에 같은 태그들의 get 요청이 보내져서 자동으로 값이 최신화되는 방식이다.

-tagTypes:

tagTypes에는 전체적인 endpoints에서 “Count”라는 태그를 사용하고 있기 때문에 전역적으로 저 태그를 사용한다는 선언을 해주는 태그이다.

 

-providesTags

providesTags: (result, error, arg) => {
        console.log(result, error, arg);
        return [{ type: "Count", id: arg.name }];
      }

위에서 말한 것을 가능하게 해주는 것이 providersTags이다. providersTags는 말 그대로 해당 get 캐시에 공급해 주는 역할을 한다.

이 부분에서 result는 캐시해 온 값, error는 에러, arg는 업데이트 한 값을 의미한다. 이런 식으로 태그를 지정해 주면 된다.

 

-invalidatesTags

invalidatesTags: (result, error, arg) => [{ type: "Count", id: arg.name }]

invalidatesTage는 서버 캐시를 무효화하고 지워버리는 역할을 한다.

mutation 훅이 실행되면 invalidateTags가 서버 캐시를 삭제한다. 그러면 위에서 말했듯이 서버에서 캐시를 받아와서 새로운 캐시로 업데이트해 주는 과정이 실행된다.

훅 사용하기

  const query = api.useGetCountQuery({ name });
  const mutation = api.useSetCountMutation();
  const setCount = mutation[0];

위에서 만든 api를 기반으로 mutation 훅은 use~Mutation()의 0번째 인덱스를 이용하여 사용하고, get 훅은 use~Query를 이용하여 사용할 수 있다.