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;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.