📕 재미있는 Redux(0)

Lee Jooam·2022년 4월 18일

frontend

사실 리덕스는 재미가 없다. 그리고 어렵기까지 하다. 리덕스의 단점 중 높은 러닝 커브가 있는 걸 보면 비단 나만 그런 건 아닌 것 같다.

하지만 리덕스가 없는 상황에서 상태관리란 더 재미없고 가끔 화가 나기도 한다.

그러니 프론트엔드의 핵심 포인트 중 하나인 상태 관리에 대해 조금이라도 잘 해내기 위해 리덕스를 배워보자.

Redux?

페이스북(현 메타)은 자신의 고질적인 문제점을 고치기 위한 새로운 패턴 Flux를 발표했다.

그리고 Flux와 주어진 상태를 변경하는 메소드인 reduce의 개념을 결합해 Redux라는 도구가 세상에 나타났다.

Redux의 동작은 크게 4가지 요소의 협업으로 이해할 수 있다.

Action creator
Dispatcher
Store
Rendering function

액션에 따라 디스패쳐가 호출되고 리듀서에서 state를 조작한다. 그리고 임의의 렌더 함수를 정의하고 스토어가 그 함수를 구독한다면 호출하는 형식이다.

🔨 실습

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./counter.js" defer></script>
    <title>Document</title>
  </head>
  <body>
    <span class="number">0</span>
    <button class="plus">+</button>
    <button class="minus">-</button>
    <button class="unsubscribe">Unsubscribe</button>
  </body>
</html>

버튼을 누르면 숫자가 변하는 카운터를 만들려고 한다. Store의 State에 따라 값이 변하고 Unsubscribe 버튼을 누르면 구독이 해지된다.

import { createStore } from "redux";

const PLUS = "PLUS";
const MINUS = "MINUS";

const plus = () => ({ type: PLUS });
const minus = () => ({ type: MINUS });

const initialState = 0;

function counterReducer(state = initialState, action) {
  console.log(action);

  switch (action.type) {
    case PLUS:
      return state + 1;
    case MINUS:
      return state - 1;
    default:
      return state;
  }
}

const store = createStore(counterReducer);

각각 type으로 PLUS와 MINUS를 갖는 액션 생성 함수를 선언했다. 그리고 숫자의 초기값인 initialState, 액션에 따라 State를 변경하는 reducer를 만든다.

store는 리덕스 패키지에서 제공하는 기능으로 dispatcher를 호출할 수 있다.

function init() {
  const number = document.querySelector(".number");
  const plusBtn = document.querySelector(".plus");
  const minusBtn = document.querySelector(".minus");
  const unsubscribeBtn = document.querySelector(".unsubscribe");

  const render = () => {
    const state = store.getState();

    number.innerText = state;
  };

  const unsubscribe = store.subscribe(render);
  
  plusBtn.addEventListener("click", () => store.dispatch(plus()));
  minusBtn.addEventListener("click", () => store.dispatch(minus()));
  unsubscribeBtn.addEventListener("click", () => unsubscribe());
}

init();

버튼에 이벤트 리스너들을 등록하고 store가 render 함수를 구독하게 한다. store는 state가 변경될 때마다 render 함수를 호출한다.

그리고 subscribe 함수의 실행 결과로 unsubscribe 함수가 반환되는데 이것을 이용해 구독을 해지할 수 있다.

😪 후기

리덕스 패키지 내부의 module import가 복잡해서 parcel 번들러를 이용해 작동시켰다.

간단한 카운터를 만들기 위해 리덕스의 일부 기능만을 사용했을 뿐인데 코드의 양이 상당하다.

리덕스 개발자인 Dan abromove는 You might not need redux라는 글을 올렸다. 도구를 도입하기 이전 앱의 규모나 기능에 따라 적절하게 선택하는 게 좋을 것 같다.

Lee Jooam

프론트엔드 개발자로 걸어가는 중입니다.

이전 포스트

🌊 Flux 패턴

다음 포스트

📕 재미있는 Redux(0)

Redux?

🔨 실습

😪 후기

🌊 Flux 패턴

📖 HTML(1) 사전 지식

0개의 댓글