useReducer

Component에 매우 많은 State를 가지고 있을 때 쓰인다.
그리고 그 state들을 효율적으로 정확하게 사용하도록 만들 필요가 있을 때 쓰인다.

사용예시

// 예시 : count

// state
// action : {type}
// * return : 해당 component의 state를 완전히 "대체"하며 들어 가게 될 object
//   -- anti mutation
const reducer = (state, action) => {
  switch(action.type){
    case "increment":
      return { count: state.count + 1};
    case "decrement":
      return { count: state.count - 1};
    default:
      throw new Error();
  }
}

function App() {
  // dispatch : state, action을 param으로 reducer를 실행
  const [state, dispatch] = useReducer(reducer, { count: 0});
  return (
    <>
      <h1>{state.count}</h1>
      <button onClick={() => dispatch({type:"increment"})}>Add</button>
      <button onClick={() => dispatch({type:"decrement"})}>Remove</button>
    </>
  )
}