useReducer()
Last updated
Last updated
useReducer()은 복잡한 상태를 관리할 때 사용하는 훅(Hook)으로 Redux의 Reducer와 비슷하게 만들어진 훅이다.
제어할 상태가 복잡하거나 많아서 일일이 useState 함수를 사용해서 상태를 업데이트하기에 벅찰 때 사용한다.
구분
설명
useReducer
복잡한 상태 관리에 사용
useState
간단한 상태 관리에서 사용
액션 객체가 dispatch()함수에 전달 된다.
action을 전달 받은 dispatch()함수가 실행되면 action 객체를 reducer()의 두번 째 인자에 전달하고 reducer() 함수가 실행된다.
2번이 실행 될 때, store 내부에 있는 state(초기 상태)를 reducer()함수의 첫 번째에 전달한다.
state(초기 상태)와 action을 전달 받은 reducer()함수가 실행될 때 무슨일이 일어날까?
reducer() 함수가 실행되면 state를 전달된 action의 요청대로 변경해서 가공된 newState를 반환한다. 그러므로 reducer()은 순수 함수이다. (state를 전달 받아서 state를 반환하기 때문이다.)
useState 의 setState 함수를 여러번 사용하지 않아도 된다
리듀서로 로직을 분리했으니 다른 곳에서도 쉽게 재사용을 할 수 있다
