[React] React Hooks - useReducer

React Hooks - useReducer

• useReducer란
  • reduce란 기존(현재) 값을 바탕으로 추가 액션을 하는 것
  • reducer란 기존 값 각각에 해당 액션을 해주는 함수, 이전 상태와 액션을 합쳐서 새로운 상태를 만드는 조작
  • reducer란 같은 상태를 변경하는 함수들을 한 곳에 모아 놓은 것
  • dispatcher(action)은 action을 전달하는 함수 (Strict Mode에서는 2회 call)
  • useReducer란 useState (컴포넌트 상태 관리에 쓰이는 hook)를 대체할 수 있는 함수이고 좀 더 복잡한 상태 관리가 필요할 때 사용한다.
  • useReducer의 장점은 setter를 직접적으로 노출하지 않으면서 상태 변경하는 함수(reducer)를 컴포넌트 외부에 둘 수 있다.
• 사용
  • import
    • import { useReducer } from 'react';
  • 기본 형태
    • const [state, dispatcher] = useReducer(reducer, 초깃값);
• useState와 useReducer의 차이
  • useState
    • 관리해야 할 state가 1개일 경우
    • state가 단순 숫자, 문자열, boolean 값일 경우
  • useReducer
    • 관리해야 할 state가 1개 이상일 경우
    • 현재 1개의 state만 관리하고 있어도 추후 늘어날 가능성이 있는 경우
    • state의 구조가 복잡할 경우