useReducer를 통한 상태관리(reducer, dispatch, action)

useReducer

 state 관리를 위한 hook으로 여러 하위 값을 가지는 state와 같이 복잡한 state를 다뤄야 할 때 useState 대신 사용할 수 있는 hook이다.

 

 useReducer를 사용하기 위해선 먼저 reducer와 dispatch, action에 대해 알아야 한다. 은행을 예로 들었을 때 은행의 역할은 예금자에 요구에 의해 입금 혹은 출금을 해주는 역할을 한다. useReducer에서 reducer가 이러한 역할을 한다. 그리고 예금자가 은행에 입금 또는 출금을 요구해야 은행은 그 동작을 수행하는데, useReducer에서는 이 역할을 dispatch라고 한다. 그리고 요구의 내용을 action이라고 하며, 이러한 과정을 통해 잔고가 변화하게 되는데, 이때 잔고를 state라고 보면 될 것 같다. 

 

 즉 은행을 reducer, 예금자의 요구를 dispatch, 요구 내용을 action, 통장 잔고를 state로 보면 된다.

 

 

useReducer 구조

 구조는 아래와 같이 useRedecer는 reducer와 초기값을 인자로 받게 된다.

 

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

 

 

 

reducer 구조

 useReducer의 인자로 사용되는 reducer는 state와 action을 받는 함수로 되어있으며, return 값에 의에 초기 state가 변화하게 된다.

 

const reducer = (state, action) => {}

 

 

 

은행 입출금 예시 코드

• reducer
  • 보통 action Type에 의해 return 값을 다르게 해야 하기 때문에 switch문을 주로 사용한다. 
• dispatch
  • 객체를 인자로 받으며, 식별할 수 있는 type과 수정해야 하는 값인 payload를 포함해야 한다.
  • dispatch를 통해 type과 action을 넘겨주게 되면 이 값을 포함한 초기 state에 의해 reducer 함수가 실행되고, reducer에서 설정한 로직대로 state를 변경시켜 준다.

const ACTION_TYPES = {
   deposit: 'deposit'
   withdraw: 'withraw'
}

const reducer = (state, action) => {
   switch (action.type) {
      case ACTION_TYPES.deposit:
         return state + action.payload
      case ACTION_TYPES.withdraw:
         return state - action.payload
      default:
         return state
         
         
function App() {
   const [number, setNumber] = useState()
   const [money, dispatch] = useReducer(reducer, 0)
   
   return (
      <div>
         <p> 잔고: {money}원 </p>
         <input 
            type: 'number'
            value: {number}
            onChange= { (e) => setNumber(parseInt(e.target.value))}
            step: '1000'
         />
         <button
            onClick={ () => {
               dispatch({type: ACTION_TYPE.deposit, payload: number})
            }}
         > 예금 </button>
         <button
            onClick={ () => {
               dispatch({type: ACTION_TYPE.withraw, payload: number})
            }}
         > 출금 </button>
      </div>
   )

 

 

 

 

 

Reference
https://goddaehee.tistory.com/311
https://www.youtube.com/watch?v=tdORpiegLg0&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=8&t=79s