📕 재미있는 Redux(1)(react에서 사용하기)

다시 한번 말하지만 리덕스는 별로 재미가 없다. 구체적으로 말하자면 리덕스를 배우는 과정이 재미 없다.

하지만 한번 배워 놓고 사용해보면 리덕스는 참 든든하다. 좋은 친구 리덕스를 리액트 환경에서 사용하는 법을 알아보자.

시작하기

일반 js 환경과 CRA 환경에서 리덕스를 다루는 건 큰 차이가 없다. 전체적인 맥락도 같다. 오히려 CRA에서 더 편하게 느껴지는 부분도 있다.

yarn add redux
yarn add react-redux

우선 두 개의 패키지를 설치해야한다.

redux는 이전 포스트에서 설명했던 것처럼 redux core에 해당하는 패키지이고, react-redux는 리액트 환경에서 리덕스를 더 편리하게 사용할 수 있게 도와주는 패키지이다.

react-redux는 store를 제공하는 고차 컴포넌트와 redux-hooks 등을 제공해준다.

모듈 설정

counter와 todos를 구현한 앱이다. 리액트에서도 마찬가지로 액션 생성자, 리듀서가 필요하다. dispatch는 리덕스 훅, 스토어는 고차 컴포넌트에서 제공한다.

// counter.js
const INCREMENT = "counter/INCREMENT";
const DECREMENT = "counter/DECREMENT";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });

const initialState = 0;

function counter(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
}

export default counter;

// todos.js
const ADD_TODO = "todos/ADD_TODO";
const DELETE_TODO = "todos/DELETE_TODO";
const CHECK_TODO = "todos/CHECK_TODO";

export const addTodo = (todo) => ({ type: ADD_TODO, todo });
export const deleteTodo = (id) => ({ type: DELETE_TODO, id });
export const checkTodo = (id) => ({ type: CHECK_TODO, id });

let nextId = 0;
const initialState = {};

function todos(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return { ...state, [++nextId]: action.todo };
    case DELETE_TODO:
      const newState = { ...state };
      delete newState[action.id];
      return newState;
    case CHECK_TODO: {
      console.log(!state[action.id].done);

      const newState = {
        ...state,
        [action.id]: { ...state[action.id], done: !state[action.id].done },
      };

      return newState;
    }
    default:
      return state;
  }
}

export default todos;

각각 기능에 맞게 액션 타입, 액션 생성자, 초기 상태, 리듀서를 만들었다. 액션의 경우 필요한 인자들을 추가로 받을 수 있는데 보통은 payload라는 이름으로 선언한다.

하지만 이 포스트에서는 역할에 맞게 이름을 부여하겠다.

export된 리듀서는 리덕스 패키지의 combineReducer 메소드로 합칠 수 있다.

컴포넌트에서 사용

// module/index.js
import { combineReducers } from "redux";
import counter from "./counter";
import todos from "./todos";

const rootReducer = combineReducers({ counter, todos });

export default rootReducer;

// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { createStore } from "redux";
import rootReducer from "./module";
import { Provider } from "react-redux";

const store = createStore(rootReducer);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Provider는 store를 주입하는 고차 컴포넌트다. 하위 컴포넌트들은 리덕스 훅을 이용해 상태를 구독할 수 있다.

문득 createStore에 취소선이 생겨 있길래 확인해봤더니 redux-toolkit으로 사용하길 권장한다는 메시지가 보였다.

deperecated 되었다고 하니 조만간 사용법을 익혀야겠다.

// counter.jsx
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { increment, decrement } from "../module/counter";

const Counter = () => {
  const number = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  const onIncrement = () => {
    dispatch(increment());
  };
  const onDecrement = () => {
    dispatch(decrement());
  };

  return (
    <>
      <strong style={{ display: "block" }}>{number}</strong>
      <button onClick={onIncrement}>Plus</button>
      <button onClick={onDecrement}>Minus</button>
    </>
  );
};

export default Counter;

counter 컴포넌트다. 특별한 기능은 없고 구독한 state에서 받은 값을 렌더링한다.

이때 useSelector 훅과 useDispatch 훅을 사용했는데 useSelector는 상태를 구독해주는 역할, useDispatch 훅으로 생성된 dispatch는 액션을 dispatch하여 state를 변경하는 역할을 한다.

// todos.jsx
import React, { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addTodo, checkTodo, deleteTodo } from "../module/todos";

const Todo = React.memo(({ id, todo, onDelete, onCheck }) => {
  return (
    <li>
      <h3>{todo.title}</h3>
      <input type='checkbox' checked={todo.done} onChange={() => onCheck(id)} />
      <button onClick={() => onDelete(id)}>삭제</button>
    </li>
  );
});

const Todos = () => {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  const insertTodo = useCallback(
    (e) => {
      e.preventDefault();

      const title = e.target[0].value;
      dispatch(addTodo({ title, done: false }));
      e.target.reset();
    },
    [dispatch]
  );

  const onDelete = useCallback(
    (id) => {
      dispatch(deleteTodo(id));
    },
    [dispatch]
  );

  const onCheck = useCallback(
    (id) => {
      dispatch(checkTodo(id));
    },
    [dispatch]
  );

  return (
    <>
      <ul>
        {Object.keys(todos).map((id) => (
          <Todo
            id={id}
            key={id}
            todo={todos[id]}
            onDelete={onDelete}
            onCheck={onCheck}
          />
        ))}
      </ul>
      <form onSubmit={insertTodo}>
        <input type='text' />
        <button type='submit'>추가</button>
      </form>
    </>
  );
};

export default Todos;

todos의 상태를 object 형태로 생각했더니 코드가 좀 지저분해진 느낌이다. 배열로 한다면 좀 더 깔끔하게 변할 것 같다.

이때 Todos의 이벤트 핸들러에 useCallback, 그리고 state에 따라 렌더링되는 Todo에 React.memo를 설정해줬는데 이것으로 불필요한 리렌더링을 방지할 수 있다.

추후 리액트가 리렌더링 되는 원인과 그에 따른 최적화 방법도 포스팅해야겠다.

후기

정말 간단한 Counter와 Todo지만 리덕스를 이용해 구현해봤더니 쉽지 않았다.

그리고 리덕스는 액션을 동기적으로 처리한다. 비동기 처리를 위해서는 리덕스 외부에서 비동기 작업을 처리하는 로직을 만들고 dispatch를 해야한다.

이 작업은 복잡한 로직이라면 굉장히 불편해질 수 있는데 다행히 리덕스는 액션에 해당하는 업데이트를 수행하기 전 미들웨어를 도입해 처리할 수 있다.

다음은 리덕스 비동기 처리에 주로 쓰이는 redux-saga에 대해서 포스팅할 예정이다.