useReducer 훅 소개

const [state, dispatch] = useReducer(reducer, initialState, init);

import React, { useReducer } from 'react';

// 1. reducer 함수 정의
// 이 함수는 현재 상태(state)와 발생한 액션(action)을 받아서 새로운 상태를 반환합니다.
function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return { count: 0 }; // action.payload를 사용한다면: return { count: action.payload };
    case 'ADD_BY_VALUE':
        return { count: state.count + action.payload }; // payload 사용 예시
    default:
      // 알 수 없는 액션 타입이 들어오면 현재 상태를 그대로 반환하거나 에러를 던질 수 있습니다.
      throw new Error(`Unsupported action type: ${action.type}`);
  }
}

function CounterWithReducer() {
  // 2. useReducer 훅 사용
  // useReducer(reducer 함수, 초기 상태 값)
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div style={{ textAlign: 'center', padding: '20px', border: '1px solid #ddd', borderRadius: '8px', maxWidth: '400px', margin: '20px auto', backgroundColor: '#f9f9f9' }}>
      <h2 style={{ color: '#2c3e50' }}>Reducer 카운터</h2>
      <p style={{ fontSize: '2em', margin: '20px 0', color: '#3498db' }}>현재 카운트: {state.count}</p>
      <div style={{ display: 'flex', justifyContent: 'center', gap: '10px' }}>
        <button
          onClick={() => dispatch({ type: 'INCREMENT' })} // 액션 객체를 dispatch 함수에 전달
          style={{ padding: '10px 20px', fontSize: '1em', backgroundColor: '#2ecc71', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
        >
          증가 (+)
        </button>
        <button
          onClick={() => dispatch({ type: 'DECREMENT' })}
          style={{ padding: '10px 20px', fontSize: '1em', backgroundColor: '#e74c3c', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
        >
          감소 (-)
        </button>
        <button
          onClick={() => dispatch({ type: 'RESET' })}
          style={{ padding: '10px 20px', fontSize: '1em', backgroundColor: '#95a5a6', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
        >
          초기화
        </button>
      </div>
      <div style={{ marginTop: '20px' }}>
         <button
            onClick={() => dispatch({ type: 'ADD_BY_VALUE', payload: 5 })}
            style={{ padding: '10px 20px', fontSize: '1em', backgroundColor: '#f39c12', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
         >
            5 추가
         </button>
      </div>
    </div>
  );
}

export default CounterWithReducer;

import React from 'react';
import CounterWithReducer from './components/CounterWithReducer'; // CounterWithReducer 임포트

function App() {
  return (
    <div className="App">
      {/* 다른 라우팅 코드 등 */}
      <CounterWithReducer /> {/* 컴포넌트 추가 */}
    </div>
  );
}