컴포넌트의 state를 생성하고 관리하기 위해 React에서는 기본 Hook인 useState와 useState로부터 파생된 추가적인 Hook인 useReducer를 제공하고 있습니다. 두 Hook은 같은 역할을 하지만 useState는 사용자가 직접 상태에 접근하는 것이 가능했다면 useReducer는 action 객체와 reducer 함수를 통해 상태에 접근한다는 차이점을 가지고 있습니다.
useReducer를 쉽게 이해하기 위해서 그림을 통해 useState와 useReducer의 차이를 살펴보겠습니다.
그림 5-1
위 그림은 useState를 은행에 빗대어 설명한 것입니다. 100원을 입금할 것이라는 요구사항을 가진 사용자와 사용자의 계좌인 state가 존재합니다. 사용자는 입금을 하기 위해서 직접 계좌에 입금 내역을 작성해야 합니다. 이때 직접 state를 변경하는 것이 setState가 됩니다.
그림 5-2
위 그림은 useReducer의 흐름을 은행으로 표현한 것입니다. 사용자는 ‘입금을 할 것이다’라는 요구사항을 가지고 있으며, useState와 달리 창구 직원과 은행 시스템이라는 중간자 역할이 추가되었습니다. 이때, 사용자는 ‘입금’이라는 action을 창구 직원에게 보내면 이를 은행 시스템에 전달하고 사용자 계좌의 state를 업데이트하게 됩니다.
이렇게 사용자의 요구 사항이 action이며 dispatch의 역할을 하는 창구 직원이 reducer의 역할을 하는 은행 시스템에 전달하면 계좌의 state를 업데이트할 수 있는 것입니다. useReducer를 활용하면 입금이나 출금 등 다양한 일을 사용자가 직접 처리하지 않고 action으로 간단하게 처리할 수 있기 때문에 복잡한 state를 다루어야 한다면 useReducer를 사용하는 것이 좋습니다.
그림 5-3