리액트 입문 10 - useReducer()

useReducer() 란?

상태를 관리하는 useState Hook 과 같은 기능을 하는 Hook이지만, 상태 업데이트 로직을 컴포넌트에서 분리할수 있습니다.

reducer란 무엇인가?

reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수입니다.

function reducer(state, action) {
  // 새로운 상태를 만드는 로직
  // const nextState = ...
  return nextState;
}

// 카운터에 1을 더하는 액션
{
  type: 'INCREMENT'
}
// 카운터에 1을 빼는 액션
{
  type: 'DECREMENT'
}
// input 값을 바꾸는 액션
{
  type: 'CHANGE_INPUT',
  key: 'email',
  value: '[email protected]'
}
// 새 할 일을 등록하는 액션
{
  type: 'ADD_TODO',
  todo: {
    id: 1,
    text: 'useReducer 배우기',
    done: false,
  }
}

action 객체의 경우 다음과 같이 작성할 수 있으며 자유입니다.

사용할때에는 다음과 같이 사용해줍니다.

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

여기서 state 는 컴포넌트에서 사용 할 수 있는 상태를 가르키게 되고, dispatch 는 액션을 발생시키는 함수입니다.
그리고 useReducer 의 첫번째 파라미터는 reducer 함수이고, 두번째 파라미터는 초기 상태입니다

useState를 통해 작성한 counter.js를 useReducer를 사용해 변경해보겠습니다.
useState를 사용한 Counter.js

useReducer()를 사용한 Counter.js

import React, { useReducer } from 'react';

//reducer 정의
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  // useReducer 사용
  const [number, dispatch] = useReducer(reducer, 0);

   // action을 발생시키기 위해서는 dispatch를 사용함
  const onIncrease = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const onDecrease = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

참고자료: https://react.vlpt.us/basic/20-useReducer.html