「Redux」 Redux toolkit(RTK) 사용하기

▪ Redux toolkit이란

 

Redux를 쉽고 편리하게 사용할 수 있도록 해주는 라이브러리다

 

기존 Redux를 사용할 때 설치해야 할 다양한 패키지(thunk, immer)를 설치할 필요가 없게 해 주고

Action , Reducers 등등 작성해야 할 코드의 양을 줄일 수 있어 편리하게 사용할 수 있다.

 

「createSlice」

 

createSlice는 Redux toolkit의 주요 기능으로

액션, 리듀서, 액션 생성기를 별도로 정의하던 것에서

이 모든 것을 하나의 슬라이스로 통합해서 사용할 수 있게 해주는 함수이다

 

---

 

▪ RTK를 이용한 ToDo 앱

 

할 일을 추가, 삭제할 수 있는 간단한 ToDo 앱을 만들어보며

RTK 사용해 보기!!

 

 

기획

 

/todo-app
├── /src
│   ├── /components
│   │   ├── TodoApp.js
│   ├── /redux
│   │   └── store.js
│   │ 	└── sliceTodo.js
│   └── index.js

 

component 폴더는 UI,

redux와 관련된 내용은 Redux에 다 넣었다

 

구상 흐름도

 

 

구현과정

 

1. Redux tookit 설치

2. Redux와 React 연동

3. Redux Slice 구현

4. UI 만들기

 

이 순으로 진행해 보겠다

 

---

1. Redux tookit 설치

 

npm install @reduxjs/toolkit react-redux

 

redux tookit와 react-redux를 설치해 준다

react-redux는 자바스크립트 라이브러리인 redux가

react hook과 같이 react 기능도 사용할 수 있게 해 준다

 

 

 

2. React와 Redux 연동하기

 

state들이 담길 store와 그것을 적용할

메인. js에 Prover로 감싸기

 

store.js

import {configureStore} from '@reduxjs/toolkit';
import todoSlice from '../redux/sliceTodo';

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

export default store;

 

index.js 

import {Provider} from 'react-redux';
import store from './redux/store';
import TodoApp from './components/TodoApp';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider store={store}>
      <TodoApp />
    </Provider>
  </StrictMode>,
);

//해당 코드는 vite 사용 중

 

 

3. Redux Slice 구현

 

이곳이 추가와 삭제를 할 수 있도록 코드를 작성하는 곳

액션, 리듀서, 액션 생성자 등등이 담겨 있다

 

앞서 store.js에서 리듀서로 등록한 내용이

이곳 코드이다

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

const initialState = {
  todo: [],
};

const todoSlice = createSlice({
  name: 'todo',
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.todo.push({
        id: state.todo.length + 1,
        title: action.payload,
      });
    },
    deleteTodo: (state, action) => {
      return {
        ...state,
        todo: state.todo.slice(0, -1),
      };
    },
  },
});

export const {addTodo, deleteTodo} = todoSlice.actions;

export default todoSlice.reducer;

글을 추가할 시에는 todo 배열에 푸시하여 보이도록 하였고

삭제는 제일 최근에 추가한 글이 삭제되도록 하였다

 

 

4. UI 만들기

 

정말 간단하게 input , button만 사용해서 UI를 만들었다

 

import React, {useState} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import {addTodo, deleteTodo} from '../redux/sliceTodo';

export default function TodoApp() {
  const [todo, setTodo] = useState('');
  const dispatch = useDispatch();
  const showtodo = useSelector(state => state.todo.todo);

  return (
    <div>
      <h2>Redux를 이용한 ToDo</h2>
      <input
        value={todo}
        onChange={e => {
          setTodo(e.target.value);
        }}
      />
      <button
        onClick={() => {
          if (todo) {
            dispatch(addTodo(todo));
            setTodo('');
          }
        }}>
        추가
      </button>

      <button
        onClick={e => {
          e.stopPropagation();
          dispatch(deleteTodo());
        }}>
        삭제
      </button>

      {showtodo.map(item => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  );
}

추가와 삭제는 앞서 createSlice(sliceTodo.js)에서 구현했던

addTodo , deleteTodo 리듀서를 사용했고

 

화면에 보이는 건 useSelector 훅을 사용해서

Todo 내용이 담기는 <todo 키>의 <todo 배열>을 가져왔다

 

또한 useDispatch 훅으로 직접 dispatch 사용이 가능해져서

액션을 직접 사용할 수 있게 되었다

기존에는 mapDispatchToProps를 사용해서 하나하나 구현해야 했음

 

---

 

결과 화면

 

"Redux 공부하기"를 입력하고 추가했을 때 

잘 추가된 모습이다.

 

sliceTodo에서 구현했던

addTodo가 호출되고 todo 배열에 잘 담기는 모습이다

 

 

 

차트로 확인해 봐도 기존 state-type 구성에서

state에 추가되어 payload가 생겼다

 

다음은 삭제 시이다

화면에도 기존 "Redux 공부하기"가 없어진 모습이다.

 

 

deleteTodo가 잘 호출됐고 todo 배열에 데이터가 없어진 모습

차트에서도 payload가 없어지고 초기 모습으로 돌아왔다

 

---

 

후기

 

React를 처음 사용했을 때처럼 아직은 많이 사용해보지 않아

익숙하진 않지만 확실히 복습느낌으로 블로그를 작성하면서

좀 더 친해진 느낌이다 ㅎㅎ

 

강의를 볼 땐 머릿속에 잘 들어온 느낌이었는데

막상 코드를 구현해보려고 하니 이런 간단한 Todo앱 구현도

굉장히 오래 걸리고 헤맸다 ㅠㅠㅠ

간단한 프로젝트를 진행하면서 Redux와 친해지도록 노력할 것이다.