📚 Reference

• 공식 문서 1
• 참고 자료 1
• 참고 자료 2

📜 Chapter

useState

useReducer

• useReducer
• reducer는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다.
• reducer에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다.

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

const [<상태 객체>, <dispatch 함수>] = useReducer(<reducer 함수>, <초기 상태>, <초기 함수>)

• reducer 함수는 현재 상태(state) 객체와 행동(action) 객체를 인자로 받아서 새로운 상태(state) 객체를 반환하는 함수이다.
• 그리고 dispatch 함수는 component 내에서 상태 변경을 일으키기 위해서 사용되는데 인자로 reducer 함수에 넘길 행동(action) 객체를 받는다.
• 행동(action) 객체는 관행적으로 어떤 부류의 행동 인지를 나타내는 type 속성과 해당 행동과 관련된 데이터를 담고 있다.
• 다시 말해, 컴포넌트에서 dispatch 함수에 행동(action)을 던지면, reducer 함수가 이 행동(action)에 따라서 상태(state)를 변경해준다.

useState, useReducer - 비교

• 어떨 때 useReducer 를 쓰고 어떨 때 useState 를 써야 할까? 일단, 여기에 있어서는 정해진 답은 없다.
• 상황에 따라 불편할때도 있고 편할 때도 있다. 예를 들어서 컴포넌트에서 관리하는 값이 딱 하나고, 그 값이 단순한 숫자, 문자열 또는 boolean 값이라면 확실히 useState 로 관리하는게 편할 것이다.