useReducer는 컴포넌트에 reducer를 추가하는 리액트 훅이다.

useReducer도 useState와 동일하게 state를 관리하는 훅이다.

그러면 useState와 달리 useReducer를 써야 할 때는 언제일까?

한 컴포넌트에서 state 업데이트가 여러 이벤트 핸들러로 분산되는 경우가 있다. 이 경우 컴포넌트를 관리하기 어려워진다. 따라서 state의 형태가 복잡해질 때 useReducer를 쓰면 좋다. state 업데이트 로직을 이벤트 핸들러에서 컴포넌트 외부의 단일함수로 분리할 수 있기 때문이다.

• 코드 길이: 반복된 set 로직을 재사용할 수 있다.
• 가독성: 복잡한 set 로직을 action으로 대체할 수 있다.
• 디버깅: action을 제대로 보냈다면 reducer 로직만 확인하면 편하다.
• 테스팅: reducer 함수는 리액트와 분리되어 있는 순수 자바스크립트여서 테스트하기 편하다.

const [state, dispatch] = useReducer(reducer, initialArg, init)

useReducer를 컴포넌트의 최상위에 호출하고, reducer를 이용해 state를 관리한다.

import { useReducer } from 'react';

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  // ...

매개변수는 다음과 같다.

• reducer : state가 어떻게 업데이트되는지 지정하는 리듀서 함수다. 리듀서 함수는 반드시 순수 함수여야 하며, state와 action을 인수로 받아야 하고, 다음 state를 반환해야 한다. state와 action에는 모든 데이터 타입이 할당될 수 있다.
• initialArg - 초기 state가 계산되는 값이다. 모든 데이터 타입이 할당될 수 있다. 초기 state가 어떻게 계산되는지는 다음 init 인수에 따라 달라진다.
• init - 초기 state를 반환하는 초기화 함수다. 이 함수가 인수에 할당되지 않는다면 초기 state는 initialArg로 설정된다. 할당되었다면 초기 state는 init을 호출한 결과가 할당된다.

useReducer는 2개의 엘리먼트로 구성된 배열을 반환한다. 따라서 useState와 비슷하게 구조 분해 할당을 하여 사용하는 것이 일반적이다.

1. 현재 state. 첫 번째 렌더링에서는 init 또는 initArg로 설정된다.
2. dispatch 함수. state를 새로운 값으로 업데이트하고 리렌더링을 일으킨다.