8.3.1 카운터 구현하기

먼저 useReducer를 사용하여 기존의 Counter 컴포넌트를 다시 구현해 보세요.

Counter.js

import React, { useReducer } from 'react';
 
function reducer(state, action) {
  // action.type에 따라 다른 작업 수행
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      // 아무것도 해당되지 않을 때 기존 상태 반환
      return state;
  }
}
 
const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });
 
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{state.value}</b>입니다.
      </p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
    </div>
  );
};
 
export default Counter;

---