useReducer Hook 함수 사용하기

useReducer 함수는 useState처럼 상태를 관리할 때 사용할 수 있는 또 다른 Hook 함수다.

이 함수를 사용할 때는 다음과 같은 개념이 사용된다.

• state : 상태
• action : 변화를 정의하는 객체
• reducer : state와 action을 파라미터로 받아ㅘ서 그 다음 상태를 반환하는 함수
• dispatch : action을 발생시키는 함수

이 Hook는 useState를 여러번 사용하는 상황에 사용하면 유용할 수 있다.(꼭 써야되는건 아니다)

만약 useState로 여러개의 상태를 생성하고 변경한다면 useReducer를 사용할 수 있다.

const initialState = {value: 1};

function reducer(state, action) {
  switch(action.type) {
    case: 'increase':
      return {value: state.value + 1};
    case 'decrease':
      return {value: state.value - 1};
    default:
      throw new Error('Unhandled action type');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const onIncrease = () => dispatch({type: 'increase'});
  const onDecrease = () => dispatch({type: 'decrease'});
  
  return { ... };
}

위 예제 코드처럼 간단한 상황이면 useReducer로 구현하는게 더 복잡해 useState를 사용하는 것이 더 적합하지만, useReducer는 상태를 업데이트하는 로직을 컴포넌트 바깥에서 구현할 수 있다는 장점이 있다.

 

useReducer의 첫 번째 인자에는 reducer 함수를 넣고, 두 번쨰 인자에는 상태의 초깃값을 넣는다.

결과물 배열의 첫 번째 원소(state)는 현재 상태이고, 두 번째 원소(dispatch)는 상태를 변화시킬 수 있는 함수이다.

이 함수를 사용해 원소로 객체를 넣어주면 reducer에서 action 원소로 받아 각자의 로직을 수행할 수 있다.

 

만약 reducer로 넘겨주는 원소를 추가하고 싶으면 아래처럼 사용할 수 있다.

const initialState = {value: 1};

function reducer(state, action) {
  switch(action.type) {
    case: 'increase':
      return {value: state.value + action.diff};
    case 'decrease':
      return {value: state.value - action.diff};
    default:
      throw new Error('Unhandled action type');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const onIncrease = () => dispatch({type: 'increase', diff: 5});
  const onDecrease = () => dispatch({type: 'decrease', diff: 3});
  
  return { ... };
}

만약 useState로 생성하고, 변경할 상태가 많거나, 컴포넌트 밖에서 사용해야 할 때는 useReducer를 사용하는 것도 좋은 방법이다.