Boilerplate 코드란 반복적으로 작성해야 하는 코드를 의미한다.
특히, Redux는 상태 관리를 위해 많은 Boilerplate 코드가 필요하기 때문에 설정이 복잡하고 코드가 길어지는 문제가 존재한다.

✅ Redux에서의 Boilerplate 코드 예제

Redux를 사용하려면 최소한 Action, Reducer, Store를 설정해야 하고, 상태를 변경하려면 반드시 dispatch(action)을 호출해야 한다.
이 과정을 거치다 보면 반복적이고 불필요한 코드가 많아진다.

1️⃣ Action 정의 (액션 타입과 생성자 함수 작성)

// actions.js
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

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

✅ 상태를 변경하려면 반드시 액션 타입과 액션 생성 함수(action creator)를 정의해야 함.

2️⃣ Reducer 작성

// reducer.js
const initialState = { count: 0 };

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

✅ reducer는 상태를 변경하는 역할을 하지만, switch-case 문이 길어지고 복잡해지는 문제가 존재.

3️⃣ Store 생성

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

✅ 상태를 저장하는 store도 따로 만들어야 함.

4️⃣ 컴포넌트에서 Redux 사용

// Counter.js
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

✅ 상태를 가져오려면 useSelector(), 변경하려면 dispatch(action)을 써야 해서 코드가 길어짐.

🔥 Zustand에서 동일한 기능을 구현하면? (Boilerplate 코드 제거)

Redux의 복잡한 설정 없이, 단 몇 줄의 코드만으로 동일한 기능을 구현 가능!

import { create } from 'zustand';

// Zustand 스토어 생성 (단 1줄)
const useCounterStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

// 컴포넌트에서 사용
function Counter() {
  const { count, increase, decrease } = useCounterStore();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  );
}

✅ Redux에 비해 코드가 엄청 짧아지고, 구조가 직관적!

🎯 Boilerplate 코드의 핵심 문제점

1. 코드가 길어지고 반복되는 부분이 많다.
   • Redux는 action, reducer, store, dispatch 등을 하나하나 설정해야 해서 코드가 복잡해짐.
2. 설정 과정이 복잡하다.
   • 작은 기능을 추가하더라도 여러 개의 파일을 수정해야 함.
3. 가독성과 유지보수성이 떨어진다.
   • 특히 switch-case 문이 많아지면, 로직을 파악하기 어려워짐.
4. 불필요한 파일이 많아진다.
   • actions.js, reducers.js, store.js 등 여러 개의 파일을 관리해야 함.

✅ 결론: Redux는 강력하지만, 설정이 번거롭고 Boilerplate 코드가 많아 관리가 어렵다. 반면, Zustand는 더 간결하고 사용하기 쉽다! 🚀