[react] useReducer Hook + 예제

useReducer의 탄생 배경

---

상태를 관리할 때 useState를 주로 사용하는데, 이 방법말고도 useReducer를 사용할 수 있습니다. 

useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다는 장점이 있습니다.

상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용할 수도 있습니다. 

 

useReducer Hook

---

useReducer의 사용법은 아래와 같습니다.

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

여기서 state는 앞으로 컴포넌트에서 사용할 state이고, dispatch는 액션을 발생시키는 함수입니다. 

useReducer의 첫 번째 파라미터는 reducer 함수이고, 두번째 파라미터는 초기 상태입니다.

 

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

reducer에서 반환하는 상태는 곧 컴포넌트가 가지게 될 새로운 상태입니다. 

액션 객체는 업데이트를 위한 정보를 가지고 있고, 주로 type 값을 지닌 객체 형태로 사용하지만, 꼭 따라야 할 규칙은 없습니다.

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

// 카운터에 1을 더하는 액션
{
  type: 'INCREMENT'
}

 

예제

---

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState); // 1

  return (
    <>
      <p>Count: {state.count}</p>
      // 2
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

export default Counter;

 

 

1. Counter 컴포넌트에서 useReducer를 사용해서 state와 dispatch 함수를 가져오고, 

2. dispatch 함수는 reducer 함수를 호출하여 새로운 상태를 계산하기 때문에 버튼 클릭 이벤트에 따라 dispatch 함수를 호출하여 상태를 변경합니다. dispatch({type: ''})

 

 

그럼 useState랑 useReducer 중에 무엇을 써야하지?

---

useState랑 useReducer 중에 그럼 뭐를 써야하는거지? 라는 의문이 들었는데, 정해진 답은 없다고 합니다.

 

만약 컴포넌트에 관리하는 값이 딱 하나고, 그 값이 단순한 숫자, 문자열, boolean 값이라면 useState를 사용하는 것이 편리할 수 있습니다. 하지만, 만약에 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해진다면 useReducer로 관리하는 것이 편리할 수 있습니다. 

 

 

참고자료

---

• 벨로퍼트, useReducer

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖