RTK Query - Overview, 초기설정

프론트엔드의 가장 중요한 역할 중 하나는

백엔드(서버)에서 데이터를 잘 가져오는 것이다.

해당 행동을 표준화시켜 사람들이 쓰기 쉽게 만든 것 중 하나가

Redux Toolkit에서 만든  RTK Query이다.

RTK Query는 Redux ToolKit Query의 약자이다. 하지만 Redux, Redux Toolkir과 독립적으로 사용이 가능하다. 또한 비슷한 역할을 하는 것에는 React Query 등이 있다.

---

STEP1. 기본형태

use어쩌구Query로 데이터를 읽어오고,

use어쩌구Mutation으로 데이터를 쓴다.

// apiSlice.js

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

export const apiSlice = createApi({

    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8000' }),

    endpoints: builder.query({

        // 전체 불러오기 : Read(List)

        getTodos: builder.query({

            query: () => '/todos',        

        }),

        // 1개 생성하기 : Create

        addTodo: builder.mutation({

            query: (todo) => ({

                url: '/todos',

                method: 'POST',

                body: todo

            })

        }),

        // 1개 갱신하기 : Update

        updateTodo: builder.mutation({

            query: (todo) => ({

                url: `/todos/${todo.id}`,

                method: 'PATCH', 

                body: todo

            })

        }),

        // 1개 지우기 : Delete

        deleteTodo: builder.mutation({

            query: ({ id }) => ({

                url: `/todos/${id}`,

                method: `DELETE`,

                body: id

            })  

        })

    })

})

//어디서든 쓸 수 있게 훅(Hook)으로 준비!

export const { 

    useGetTodosQuery,

    useAddTodoMutation,

    useUpdateTodoMutation,

    useDeleteTodoMutation,

} = apiSlice  

---

STEP2. RTK Query를 쓸 수 있는 분위기 만들기 #초기 환경 설정

// index.js

import { ApiProvider } from "@reduxjs/toolkit/query/react";

import { apiSlice } from 

ReactDom.createRoot(document.getElementById('root'))

    .render(

        <ApiProvider api={apiSlice}>

            <MyCompoent />

        </ApiProvider>

);