🔮 바닐라JS를 Redux로 리팩토링 하기

데브 스토어를 Redux로 리팩토링하고 있다. 바닐라JS 프로젝트를 하면서 상태변경을 위해 코드를 많이 작성해야했다.

처음 프로젝트를 설계할 때는 바닐라이기 때문에 Redux는 안쓰기로 결정했지만, 바닐라로 상태변경을 하려면 이렇게 생긴 코드를 쓰게 된다...

if (i === 0) {
  	buttonLoginType[i + 1].classList.remove("on");
  	buttonLoginType[i].classList.remove("help");
  	buttonLoginType[i].classList.add("on");
  	buttonLoginType[i + 1].classList.add("help");
} else if (i === 1) {
  	buttonLoginType[i - 1].classList.remove("on");
  	buttonLoginType[i].classList.remove("help");
  	buttonLoginType[i].classList.add("on");
  	buttonLoginType[i - 1].classList.add("help");
}

그래서 프로젝트를 어느정도 완성한 시점에 리덕스를 도입하게 됐다. 코드가 엄청 간결해지고 있다!! 😀😀😀😀😀

---

Redux는 자바스크립트의 예측가능한 상태관리 도구다.

상태정보를 중앙집중적으로 관리하고 대리인(?)을 통해서만 상태정보를 변경할 수 있기 때문에 의도하지 않은 state 값 변경 문제를 사전차단한다.

이런 아이디어뿐만 아니라 이전의 상태까지 레코딩되는 기능과 hot 모듈 리로딩(코드 수정 후 저장할 때 전부 새로고침되는 것이 아니라 변경부분만 수정) 기능 덕에 인기가 많아졌다고 한다.

동작원리

---

store는 은행이고 dispatch, subscribe, getState는 창구 직원이다. 위에서 말한 대리인에 해당하는 함수들이다. 그리고 금고지기로 reducer가 있다.

state는 절대로 직접 업데이트하지 않는다. 그래서 이러한 역할 분담을 기억하고 잘 활용하는게 중요하다.

금고지기인 reducer에게 데이터를 수정할 수 있는 권한이 있다. reducer를 만들어 보자!
(참고로 창구 직원들은 reducer에게 데이터 전달만 해준다)

1. 스토어 생성

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./js/reducers/index.js";

const store = configureStore({
    reducer: rootReducer,
    devTools:
        window.__REDUX__DEVTOOLS_EXTENSION__ &&
        window.__REDUX__DEVTOOLS_EXTENSION__(),
});

configureStore는 기존문법인 createStore을 사용할 때 취소선이 생기면서 deprecated 되었으니 redux/toolkit의 configureStore 사용을 추천한다는 문구를 확인할 수 있다. 안내에 따라서 configureStore로 대체해줬다. 미들웨어를 추가하고, 기본적으로 redux-thunk를 포함하고 있고 Redux DevTools Extension을 사용할 수 있다.

combineReducers는 여러 reducer를 한데 모은다. 상태는 객체형태로 저장되며, 각 리듀서는 (state, action)의 형태를 가지고 리덕스의 슬라이스 리듀서 기능을 사용해 기존의 상태 객체에 합쳐진다. 이러한 패턴을 구현한 것이 combineReducers이다. 위 코드처럼 ES6의 객체 리터럴로 상태의 형태를 정의한다. 매개변수 객체 안의 값들은 상태의 key로 저장된다.

2. Reducer 생성

// index.js

import { combineReducers } from "redux";
import login from "./loginReducer.js";

const rootReducer = combineReducers({ login });

export default rootReducer;

리듀서의 함수 이름은 combineReducers의 매개변수 객체의 안에 들어간다. 즉 이 함수의 이름 자체가 state의 key가 된다. 상태의 가장 상위 이름이 된다.

// loginReducer.js

import { LOGIN_USER } from "../actions/types.js"; // type은 별도의 파일에 모아둔다

const initialState = {
    loginType: "BUYER",
    typeButtonStyle: {
        buyer: true,
        seller: false,
    },
};

export default function login(state = initialState, action) {
    switch (action.type) {
		...

        case LOGIN_USER:
            return {
                ...state, // 새로운 정보로 덮어쓰기!
                loginType: action.loginType,
                token: action.token,
                typeButtonStyle: {
                    buyer: action.buyer,
                    seller: action.seller,
                },
            };

        default:
            return state;
    }
}

로그인 리듀서는 state와 action을 매개변수로 받는다. 여기서 state는 구 state를 의미하고 action은 바꾸고자 하는 내용을 담고 있다. 이 둘을 조합해서 신 state를 만든다. 판매자 버튼을 기본값으로 하고 클릭할 때마다 스타일이 바뀌는 것을 고려해서 상태를 구조화했다.

처음에 구조를 잘 설계해야 다른 코드에서 잘 가져다 쓸 수 있다.

// 전개구문 사용방식

const data = {
  'id': 1,
  'name': 'Moon Hee',
  'age': 29,
}

console.log({ ...data, 'age': 30 }); // { id: 1, name: 'Moon Hee', age: 30 }

3. dispatch를 이용한 상태 변경

import store from "../../../store.js";

class BuyerButton {
    constructor() {
        this.button = document.createElement("button");
    }

    storeType() {
        store.dispatch({
            type: "LOGIN_USER",
            loginType: "BUYER",
            buyer: true,
            seller: false,
        });
    }

    render() {
		...

        this.button.addEventListener("click", this.storeType);

        store.subscribe(() => {
            this.button.style.backgroundColor = store.getState().login
                .typeButtonStyle.buyer
                ? "inherit"
                : "#e9e9e9";
            this.button.classList.remove(
                store.getState().login.typeButtonStyle.buyer ? "help" : "on"
            );
            this.button.classList.add(
                store.getState().login.typeButtonStyle.buyer ? "on" : "help"
            );
        });

        return this.button;
    }
}

export default BuyerButton;

dispatch는 reducer를 호출해서 state를 변경한다. 전달할 내용은 어떤 state를 바꿔야할지 알려주는 type과 바꾸고 싶은 내용을 객체에 담아서 보낸다. 리액트는 useDispatch를 사용하지만 바닐라에서는 store.dispatch() 형식을 사용한다.

subscribe는 스토어의 상태가 바뀔 때마다 인자의 함수를 실행한다. 구매자 버튼을 누르거나 판매자 버튼을 누를 때 dispatch가 실행되고 이것이 스토어의 상태를 변경시키면 그 변경사항을 적용시켜야 할 때 사용하면 된다.

작동하는 코드를 찾기 위해서 부모 컴포넌트와 자식 컴포넌트를 넘나들면서 코딩했고 렌더링 시점을 따져서 setTimeout를 사용하기도 했다. Redux를 사용하면 일하는 컴포넌트에 직접 코딩할 수 있어서 가독성이 좋아진다. 로그인 타입 컴포넌트에서 33줄이 줄어들었고 그냥 짧아진게 아니라 비즈니스 로직의 주인에게 코드를 쓸 수 있어서 매우매우 좋아졌다.