https://react.vlpt.us/basic/20-useReducer.html

useState 말고도 useReducer로 상태를 관리해줄 수가 있다. 컴포넌트에 종속된 useState와는 달리 상태 관련 로직을 컴포넌트에서 분리시킬 수도 있고 컴포넌트 바깥에 작성해 줄수도 있으며 다른 파일에 작성한 후 불러와서 사용하는 것도 가능하다.

리덕스(Redux)의 핵심부분인 reducer를 거의 그대로 구현한다.

소규모 앱에서 useReducer와 컨텍스트 API 조합으로 리덕스를 대체하는 것이 가능하다.

기존의 Hooks는 state마다 setState를 해줘야 했지만 useReducer를 쓰면 한 번의 작업으로 모든 state를 설정해줄 수 있다.

프로토타입

const [state, dispatch] = useReducer(reducer, initalState)

state

state에는 reducer 에서 설정한 state가 들어간다.

클래스처럼 state.{속성}으로 접근할 수 있다.

dispatch

(리덕스에서도 쓰이는) 액션 객체가 들어간다. reducer로 보내줄 값들을 객체 형태로 보내준다.

dispatch({type : 'SET_WINNER', state : '0'}, [])

• {type : 'SET_WINNER', state : '0'} 객체가 action 객체가 된다.
• action 객체를 state로 dispatch 할 수 있다.
• action 객체를 어떻게 처리할지는 reducer에서 처리한다.
• action을 구분하는 일종의 코드 역할을 하는 문자열은 type으로 설정해주는 것이 일반적.

액션 객체만으로는 state를 바꿀 수 없다. 액션을 해석해서 state를 직접 바꾸는 역할을 하는 것이 reducer이다.

<aside> 💡 액션의 이름은 상수로 빼는 편이 좋다.

</aside>

state가 있고, 액션을 dispatch해서 state를 바꾸는데, 그것을 어떻게 바꿀지는 reducer에 써준다. dispatch만 자식 컴포넌트에서 props로 받아 action을 보내도 reducer가 작동된다.