바닐라 자바스크립트 Redux 적용하기

 

 

바닐라 자바스크립트를 통해 리덕스를 알아보자.

리덕스(Redux)란 무엇인가?

리덕스(Redux)는 자바스크립트 애플리케이션에서 흔히 쓰이는 state container이며, 리액트(React) 뿐만 아니라, 어떠한 자바스크립트 라이브러리와도 연결할 수 있는 state(상태) 관리 라이브러리이다.

예제를 통해 알아보자.

아래 예제를 보면 버튼을 눌렀을 때, count의 수가 증가하거나 감소하는 자바스크립트 코드가 있다.

index.html

index.js

Add 버튼을 눌렀을 때, 숫자가 증가하고

Minus 버튼을 눌렀을 때, 숫자가 감소한다.

 

이 자바스크립트로 작성된 코드를 리덕스(redux)로 바꾼다면?

아래와 같은 예제가 될 것이다.

import { createStore } from "redux";
const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");

number.innerText = 0;

const ADD = "ADD";
const MINUS = "MINUS";

const countModifier = (count = 0, action) => {
  switch (action.type) {
    case ADD:
      return count + 1;
    case MINUS:
      return count - 1;
    default:
      return count;
  }
  
  const countStore = createStore(countModifier);
  
  const onChange = () => {
  number.innerText = countStore.getState();
};

countStore.subscribe(onChange);

const handleAdd = () => {
  countStore.dispatch({ type: ADD });
};

const handleMinus = () => {
  countStore.dispatch({ type: MINUS });
};

add.addEventListener("click", handleAdd);
minus.addEventListener("click", handleMinus);

이제 예제를 하나씩 살펴보자.

import { createStore } from "redux"; 

위에 이 구문은 store를 생성하는 구문이다.

store

내 애플리케이션에서 바뀌는 data를 의미하며, 한 애플리케이션 당 하나의 스토어를 만들게 된다.

스토어(store) 안에는 현재의 앱(App) 상태와 리듀서(reducer)가 들어가 있고, 추가적으로 몇 가지 내장 함수들이 있다.

그렇다면, 현재 이 코드에서는 state가 count라고 볼 수 있다.

 

그럼 count의 상태 값을 어떻게 바꿀 수 있을까?

바로 리듀서(reducer)라는 것을 통해서 값을 바꿀 수 있다.

reducer

data를 바꾸고 수정하는 것을 책임지는 함수이며, 리듀서(reducer)가 return 하는 모든 것들은 내 애플리케이션의 data를 말한다.

리듀서(reducer)는 반드시 내 애플리케이션의 data를 수정하는 함수이어야만 한다.

const countStore = createStore(countModifier);

이렇게 store에 해당하는 함수 createStore()를 만들면, 이 함수는 우리에게 인자 값으로 리듀서(reducer)를 주기를 요구한다.

// 리듀서(reducer)역할을 하는 함수, 여기서 count의 값을 수정한다.
const countModifier = (count = 0, action) => {
  switch (action.type) {
    case ADD:
      return count + 1;
    case MINUS:
      return count - 1;
    default:
      return count;
  }

countModifier라는 리듀서(reducer) 함수를 정의하고, 첫 번째 인자에는 현재 상태 값이 들어가고, 두 번째 인자에는 어떠한 행동을 action이 들어가게 설정한다.

action

상태에 어떠한 변화가 필요가 필요할 때 발생하는 어떠한 행동을 말하며, 하나의 객체 형태를 가진다.

액션 객체는 type 필드를 필수적으로 가지고 있어야 하고 그 외의 값들은 내 마음대로 넣어줄 수 있습니다.

이제 이 두 번째 인자에 있는 action에 우리는 행동을 지시해야 하는데, 그것을 dispatch()로 지시할 수 있다.

const handleAdd = () => {
  countStore.dispatch({ type: ADD });
};

const handleMinus = () => {
  countStore.dispatch({ type: MINUS });
};

dispatch

스토어의 내장 함수 중 하나이며, 액션을 발생시키는 것이라고 이해하시면 됩니다.

이 코드에서는 { type: ADD }, { type: MINUS }가 행동이며, dispatch()가 리듀서(reducer)의 두 번째 인자 action에게 지시한다.

그 결과, 리듀서(reducer)에 해당하는 함수 countModifier()에서 switch문을 통해 조건이 일치하는 action들이 실행되고, ADD이면 count값이 1씩 증가하고, MINUS이면 count값이 1씩 감소하게 되는 것이다.

 

그러면 이제 값들을 가지고 화면에 어떻게 나타낼 수 있을까?

그럴 때, 함수 subscribe()를 사용하여 나타낼 수 있다.

subscribe

우리에게 store 안에 있는 변화들을 알 수 있게 해 준다.

스토어의 내장 함수 중 하나이며, 함수 형태의 값을 파라미터로 받아온다.

subscribe() 함수에 특정 함수를 전달해주면, 액션이 디스패치 될 때마다 전달해준 함수가 호출된다.

const onChange = () => {
  number.innerText = countStore.getState();
};

countStore.subscribe(onChange);

즉, ADD, MINUS의 행동들을 dispatch()로 리듀서(reducer)의 두 번째 인자 action에게 보냈을 때, 그 action은 조건에 일치하는 값을 반환하는데, 그때 subscribe가 실행이 된다. 

함수 subscribe() 안에 있는 onChange 함수는 반환된 count의 상태 값을 화면에 보여주는 함수이기 때문에,

결과적으로 subscribe가 실행될 때마다 화면에서 count의 수가 변하는 것을 볼 수 있는 것이다.

이렇게 간단하게 count의 수를 증가하고 감소시키는 방법을 통해 조금이라도 리덕스(redux)를 알 수 있었다.

[ 본 내용은 노마드 코더 리덕스 강의를 토대로 정리한 것 입니다. ]