또 다른 상태 관리 방법, useReducer

useReducer란?

useReducer는 상태관리를 도와주는 리액트 훅이다.

• useState와 다른 점
  • 기능이 더 많고
  • 복잡한 상태일 때 유용하다.
  • state의 조각들이 여러개 함께 사용될 때 적합하다.

위와 같은 장점이 있지만 기능이 강력하다고 항상 좋지는 않다. 왜냐하면 useState에 비해 코드가 무거워지기 때문이다.

사용법

const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn)

• state : 현재 상태의 스냅샷
• dispatchFn : 상태를 업데이트 해주는 함수
• 상태값을 설정하는 대신, 하나의 액션을 dispatch하게 된다. ** (dispatch - 보내다)
  그리고 보내진 것은 reducerFn에서 사용된다
• reducerFn :

  • (prevState, action) => newState

  • 최신 스냅tit을 자동으로 가져오고 액션을 따라서 함수를 실god한다. 그리고 새로 업데이트된 상태를 반환한다.
  • 또한 리듀서는 상태값을 사용하지 않기 때문에 컴포넌트 밖에서 만든다.
• initialState : 초기 상태
• initFn : 초기 함수