[React] Tool-kit로 To-do List 만들어보기 -1

React redux tool-kit 으로 투두 리스트를 만들어 보는중이다.

기존 리덕스보다 편리하고 깔끔하다.

기존 To-do 리스트 몇개 만들어 주고 띄어주고 삭제 기능까지 구현했다.

 

---

설치

yarn add react-redux @reduxjs/toolkit

패키지를 설치해준다.

 

---

 

store

// src/redux/modules/config/configStore.js

import { configureStore } from "@reduxjs/toolkit";

import todoSlice from "../modules/todoSlice";




const store = configureStore({
  reducer: { todo: todoSlice },
});

export default store;

-기존 리덕스와 같이 store도 생성해주고, 

 

// index.js
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

-Provider로 감싸줘서 사용해준다.

 

 

---

todoSlice

// src/redux/modules/todoSlice

import { createSlice } from "@reduxjs/toolkit";

import shortid from "shortid";

// counterSlice.js의 Slice 구조
const initialState = [
  {
    id: shortid.generate(),
    writer: "김철수",
    title: "리액트1",
    contents: "리액트 공부하기1",
  },
  {
    id: shortid.generate(),
    writer: "김나은",
    title: "운동하기",
    contents: "러닝",
  },
];

const todoSlice = createSlice({
  name: "todo",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.push(
        {
          id: shortid.generate(),
          writer: action.payload.writer,
          title: action.payload.title,
          contents: action.payload.contents,
        }
      )
    },
    removeTodo: (state, action) => {
      return state.filter((todo)=> todo.id !== action.payload)
    }
  },
});
// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addTodo, removeTodo } = todoSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default todoSlice.reducer;

초기값을 두고 삭제, 추가 기능을 넣어줬다

- 이제 createSlice라는 API를 사용해준다.

기존의 redux랑 유사해서 기본 틀만 반복 숙달 해줘야겠다.

- push() 부분에 객체 복사 작업을 안 해줬지만 작동을 한다. 이미 툴킷 안에 포함되어 있는 기능이기 때문이다.

 

---

 

사용해보기

 // List.jsx
 const todos = useSelector((state) => state.todo);
  const dispatch = useDispatch();

  
 
  return (
    <> 
 {todos.map((todo) => (
        <div key={todo.id}>
          <h3>제목: {todo.title}</h3>
          <p>id: {todo.id}</p>
          <p>작성자: {todo.writer}</p>
          <p>내용: {todo.contents}</p>
          <button onClick={()=>{dispatch(removeTodo(todo.id))}}>삭제</button>
        </div>
        </>
        );
       };

-useSelector로 초기 리스트를 가져와주고 map으로 원소들을 뿌려준다.

-dispatch로 slice에 등록한 함수를 사용해준다.

 

결과:

 

---

 

마무리

-기존 redux는 복잡해서 그런지 잘 안 와닿았는데 tool-kit은 뭔가 

잘 이해된다.