useReducer()

1. 언제 사용할까?

useReducer()은 복잡한 상태를 관리할 때 사용하는 훅(Hook)으로 Redux의 Reducer와 비슷하게 만들어진 훅이다.

제어할 상태가 복잡하거나 많아서 일일이 useState 함수를 사용해서 상태를 업데이트하기에 벅찰 때 사용한다.

useReducer vs useState

구분	설명
useReducer	복잡한 상태 관리에 사용
useState	간단한 상태 관리에서 사용

useReducer 작동 흐름

useReducer 작동 흐름 이해를 돕기 위한 그림

1. 액션 객체가 dispatch()함수에 전달 된다.

2. action을 전달 받은 dispatch()함수가 실행되면 action 객체를 reducer()의 두번 째 인자에 전달하고 reducer() 함수가 실행된다.

3. 2번이 실행 될 때, store 내부에 있는 state(초기 상태)를 reducer()함수의 첫 번째에 전달한다.

state(초기 상태)와 action을 전달 받은 reducer()함수가 실행될 때 무슨일이 일어날까?

reducer() 함수가 실행되면 state를 전달된 action의 요청대로 변경해서 가공된 newState를 반환한다. 그러므로 reducer()은 순수 함수이다. (state를 전달 받아서 state를 반환하기 때문이다.)

장점

• useState 의 setState 함수를 여러번 사용하지 않아도 된다

• 리듀서로 로직을 분리했으니 다른 곳에서도 쉽게 재사용을 할 수 있다