RTK Query

RTK(Redux Tool-kit) Query

 

정의

API 호출  및 Redux store 내에서 상태 관리를 하는 데이터를 가져오고 캐싱하는 라이브러리.

=>  API endpoint를 쉽게 정의하고 관리할 수 있도록 유틸리티 세트와 사용자 정의 가능한 API를 제공.

 

기반 

Redux toolkit의 createAsyncThunk와 createSlice 기반으로 구축 .

 

 기능

• 자동 로딩 상태 관리
• 자동 오류 처리 및 재시도
• 보류 중인 요청 자동 취소
• 자동 캐싱 및 네트워크 인식 무효화
• 데이터를 항상 최신 상태로 유지하기 위한 자동 백그라운드 리페칭
• 자동 요청 중복 제거 기능으로 동일한 요청이 여러 번 전송되지 않도록 방지

 

사용 방법 

 

리액트  프로젝트 시작 시 CRA, 또는 vite 초기 설정 이후 초기 설정 

 

설치 시 

 

yarn 사용자 

yarn add @reduxjs/toolkit react-redux

npm 사용자

npm i @reduxjs/toolkit react-redux

 

import  방법 

import { createApi } from "@redux/toolkit/query"

// or

import { createApi } from "@redux/toolkit/query/react"

 

import에 있는  createApi 함수가  merge 뭐지(just kidding)

블로그 작성하다 물음표 늪에 빠진 나의 표정

createApi에 대해서 상세하게는 다음줄에서 알아보자 

---

RTK Query에 포함된 API

 

createApi

서버로 HTTP 요청을 보낼 수 있는 ¹⁾API endpoint를 쉽게 만들 수 있는 메소드.

=> 서버와 통신하기 위한 API를 손 쉽게 정의할 수 있도록 도와주는 메소드  

옵션 

• fetchBaseQuery() : 사용하여 생성한 HTTP 요청 함수
• baseQuery: RTK Query에서 사용하는 기본 HTTP 요청 함수를 설정
• reducerPath: 생성된 Redux slice의 이름을 설정. 기본값은 "api"임.
• tagTypes: API 엔드포인트의 성공 및 실패 상태를 나타내는 태그를 정의함.

      객체는 { name: initialData } 형식으로 정의되며, name은 태그의 이름을, initialData는 초기  상태를 나타냄.

• keepUnusedDataFor: RTK Query 캐시에서 사용하지 않는 데이터를 보관하는 시간을 설정 기본값은 60초임.
• endpoints: API 엔드포인트를 정의

       endpoints 객체는 createApi() 함수를 호출하면서 함께 전달되며,  { endpointName: endpointDefinition } 형식으로

       정의한다.  endpointName은 API 엔드포인트의 이름을, endpointDefinition은 API 엔드포인트의 구성 옵션을 나타냄.

 

       endpointDefinition 객체에는 다음과 같은 속성이 포함

 

       query: API 엔드포인트에 대한 HTTP 요청 메소드와 경로를 정의함.

       transformResponse: HTTP 응답 데이터를 처리하는 데 사용되는 함수를 정의함.

       invalidates: 캐시 데이터를 무효화하는 다른 API 엔드포인트를 정의함.

 

 

 

 

작성 방법 

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
export const api이름 = createApi({
  reducerPath: '리듀서이름',
  baseQuery: fetchBaseQuery({
    baseUrl: import.meta.env.VITE_SERVER_URL,
  }),
  endpoints: (builder) => ({
    요청이름: builder.query({
      query: (주소에 넘길 값) => 'api 주소값/(주소에 넘길 값)',
    }),
  }),
});
 
export const {
  use요청이름Query
} = postApi;

 

 

해당 방법처럼 이용해서 코드를 작성해봤다. 

 

아직은 감은 잘안오지만 조금은 RTK Query 알거 같은 느낌??

endpoints쪽에 옵션들 잘기억해두면 좋을거 같다.