redux-toolkit, RTK query

Redux Toolkit 및 RTK Query를 사용하여 간단한 to-do 리스트를 만들어 보겠습니다. RTK Query는 Redux Toolkit을 기반으로 하는 데이터 가져오기 및 상태 관리 라이브러리입니다.

1. 먼저, Redux Toolkit과 RTK Query를 설치합니다.

npm install @reduxjs/toolkit react-redux @reduxjs/toolkit/query

2. Redux Toolkit 스토어를 설정합니다.

Redux Toolkit을 사용하여 스토어를 설정하고 RTK Query 슬라이스를 추가합니다.

// src/store.js

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

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }), // Assuming you have an API endpoint for todos
  endpoints: (builder) => ({
    getTodos: builder.query({
      query: () => 'todos',
    }),
    addTodo: builder.mutation({
      query: (text) => ({
        url: 'todos',
        method: 'POST',
        body: { text },
      }),
    }),
    toggleTodo: builder.mutation({
      query: (id) => ({
        url: `todos/${id}`,
        method: 'PATCH',
      }),
    }),
  }),
});

export const { useGetTodosQuery, useAddTodoMutation, useToggleTodoMutation } = api;

const store = configureStore({
  reducer: api.reducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
  devTools: process.env.NODE_ENV !== 'production',
});

export default store;

3. React 컴포넌트를 작성합니다.

RTK Query를 사용하여 to-do 리스트를 표시하고 상태를 변경하는 React 컴포넌트를 작성합니다.

// src/components/TodoList.js

import React, { useState } from 'react';
import { useGetTodosQuery, useAddTodoMutation, useToggleTodoMutation } from '../store';

const TodoList = () => {
  const { data: todos } = useGetTodosQuery();
  const [newTodo, setNewTodo] = useState('');
  const [addTodo] = useAddTodoMutation();
  const [toggleTodo] = useToggleTodoMutation();

  const handleAddTodo = () => {
    if (newTodo.trim() === '') return;
    addTodo(newTodo);
    setNewTodo('');
  };

  return (
    <div>
      <h1>Todo List</h1>
      <div>
        <input
          type="text"
          placeholder="할 일을 입력하세요"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
        />
        <button onClick={handleAddTodo}>추가</button>
      </div>
      <ul>
        {todos?.map((todo) => (
          <li
            key={todo.id}
            onClick={() => toggleTodo(todo.id)}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

4. 애플리케이션의 진입점을 설정합니다.

Redux Toolkit 스토어와 RTK Query를 React 애플리케이션에 연결하고 TodoList 컴포넌트를 렌더링합니다.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import { ReactQueryDevtools } from 'react-query/devtools';
import TodoList from './components/TodoList';

ReactDOM.render(
  <Provider store={store}>
    <ReactQueryDevtools />
    <TodoList />
  </Provider>,
  document.getElementById('root')
);

이제 Redux Toolkit과 RTK Query를 사용하여 간단한 to-do 리스트 애플리케이션이 준비되었습니다. 필요한 경우 스타일링 및 서버와의 통합을 위해 API 엔드포인트를 수정하고 추가 기능을 구현할 수 있습니다.