useReducer 또는 Redux Reducer? 어떤 것이 필요한지 판단하는 방법

Source: Dev.to

🎯 핵심 아이디어: 리듀서란?

useReducer와 Redux 리듀서는 동일한 개념을 기반으로 합니다: 리듀서는 단순히 다음과 같은 함수입니다:

• 현재 상태와 액션을 받는다
• 다음 상태를 반환한다

순수 JavaScript에서는 다음과 같이 보입니다:

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

부수 효과가 없습니다. 변이가 없습니다. 순수 함수일 뿐입니다.

🪝 React에서 useReducer

useReducer는 단일 컴포넌트(또는 props나 context를 통해 작은 그룹의 컴포넌트)에서 상태를 관리하기 위한 React 훅입니다.

예시

import React, { useReducer } from 'react';

function Counter() {
  const initialState = { count: 0 };

  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        return state;
    }
  }

  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      
Count: {state.count}

       dispatch({ type: 'increment' })}>+
       dispatch({ type: 'decrement' })}>-
    
  );
}

useReducer에 대한 주요 포인트

• 상태는 컴포넌트에 로컬합니다(컨텍스트를 통해 수동으로 공유하지 않는 한).
• 미들웨어, 개발자 도구, 전역 스토어가 없습니다.
• 복잡한 로컬 상태 업데이트에 적합합니다.

🏪 Redux 리듀서

Redux에서 리듀서는 동일한 방식으로 동작하지만, 로컬 상태 대신 전역 스토어를 업데이트하여 앱 어디서든 접근할 수 있습니다.

리듀서 정의

// reducer.js
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}
export default counterReducer;

스토어 생성

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

const store = createStore(counterReducer);

컴포넌트 사용

// Component.jsx
import { useSelector, useDispatch } from 'react-redux';

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

  return (
    <>
      
Count: {count}

       dispatch({ type: 'increment' })}>+
       dispatch({ type: 'decrement' })}>-
    
  );
}

Redux 리듀서에 대한 주요 포인트

• 상태는 전역적이다
• 강력한 미들웨어 지원 (예: Redux Thunk, Redux Saga)
• 디버깅을 위한 개발자 도구와 통합
• 보통 대규모 복잡한 앱에서 사용된다

🔍 그들이 동일한 점

두 경우 모두 함수형 프로그래밍의 동일한 리듀서 개념을 기반으로 합니다.

🔀 그들은 어떻게 다른가

💡 어느 것을 사용해야 할까요?

useReducer를 사용해야 할 때

• 상태가 복잡하지만, 하나의 컴포넌트 또는 작은 서브트리와만 관련될 때.
• 전역 상태 공유가 필요하지 않을 때.
• 작은 경우에 Redux를 도입하는 것을 피하고 싶을 때.

Redux 리듀서를 사용해야 할 때

• 전역 상태 관리가 필요할 때.
• 고급 디버깅, 타임‑트래블, 그리고 미들웨어가 필요할 때.
• 앱이 충분히 커서 추가 설정을 정당화할 수 있을 때.

🏁 최종 요약

useReducer와 Redux 리듀서는 자전거와 버스와 같다 — 둘 다 상태 A에서 상태 B로 이동하게 해 주지만, 하나는 짧고 개인적인 여행(로컬 컴포넌트 상태)을 위한 것이고, 다른 하나는 전체 도시를 운반하는(전역 앱 상태) 용도다. 이들은 같은 함수형 프로그래밍 DNA를 공유하지만, 서로 다른 생태계에 존재한다.