프론트엔드의 가장 중요한 역할 중 하나는
백엔드(서버)에서 데이터를 잘 가져오는 것이다.
해당 행동을 표준화시켜 사람들이 쓰기 쉽게 만든 것 중 하나가
Redux Toolkit에서 만든 RTK Query이다.
RTK Query는 Redux ToolKit Query의 약자이다. 하지만 Redux, Redux Toolkit과 독립적으로 사용이 가능하다. 또한 비슷한 역할을 하는 것에는 React Query 등이 있다.
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
// index.js
import { ApiProvider } from "@reduxjs/toolkit/query/react";
import { apiSlice } from
ReactDom.createRoot(document.getElementById('root'))
.render(
<ApiProvider api={apiSlice}>
<MyCompoent />
</ApiProvider>
);