Hooks-useReducer 공부하기

react hooks에서 사용하는 useReducer() 간단 설명

function reducer(state, action) {
  switch(action.type) {
    case 'INCREMENT':
      return state + 1;   
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

Reducer 함수

• 현재상태(state)와 액션객체(actrion)를 파라미터로 받아와서 새로운 상태를 반환해주는 함수
• action 은 업데이트를 위한 정보를 가지고 있어서 위에 예시처럼 switch문을 이용해서 사용함
• action.type은 주로 대문자와 _를 사용하는 관습이 있음

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

useReducer()
State : 현재 상태
dispatch: action을 발생시키는 함수
reducer: 상태 업데이트 로직을 담은 함수
initialState: 초기 값

dispatch({ type: 'INCREMENT' }).
// 사용 예시

useReducer vs useState
컴포넌트에서 관리하는 값이 1개이고 단순하면 useState
컴포넌트에서 관리하는 값이 많아지고 상태의 구조가 복잡해지면 useReducer