React

useReducer 훅 소개

리액트에서 제공하는 또 다른 강력한 훅인 useReducer에 대해 알아보겠습니다. useReducer는 useState와 유사하게 상태를 관리하지만, 특히 복잡한 상태 로직을 다루거나 다음 상태가 이전 상태에 의존적인 경우, 그리고 여러 하위 값으로 구성된 상태 객체를 다룰 때 더 효과적입니다.

카운터 예제를 통한 이해와 useReducer를 중심으로 useReducer 훅 소개의 판단 흐름을 읽습니다.

1

지역 상태와 useReducer 비교

useState는 상태의 값을 직접 설정하는 반면, useReducer는 상태를 업데이트하는 로직을 reducer 함수라는 곳으로 분리하여 관리합니다.

useReducer
2

useReducer의 기본 사용법

useReducer 훅은 두 개의 인자를 받고, 두 개의 값을 반환합니다.

복잡한 상태 로직
3

useReducer의 장점

복잡한 상태 로직 관리: 여러 개의 하위 상태를 가진 객체나, 다음 상태가 이전 상태에 따라 결정되는 복잡한 상태 전환 로직을 깔끔하게 분리하여 관리할 수 있습니다.

다음 상태가 이전 상태에 의존적인 경우