[07-React] 6-2. React Hook :: useReducer

2. useReducer

: 상태 관리 훅

: useState보다 복잡한 상태 로직을 처리할 경우 유용

: 주로 여러 하위 값들이 의존하는 상태를 관리 or 상태 업데이트 로직이 복잡할 경우 사용

const [<상태 객체>, <dispatch 함수>] = useReducer(<reducer 함수>, <초기 상태>, <초기 함수>);
const [state,      dispatcher     ] = useReducer(reducer,        initialState, init);

• 구성
  - 반환 값은 useState와 동일하게 상태 값과 업데이트 함수
  -  state :: 현재 useReducer의 값
  - dispatcher :: state를 업데이트하는 함수, setState와 달리 인수로 정해진 action 값을 넘김(동작을 미리 정의 및 제한)
  - reducer :: useReducer의 기본 action을 정의 하는 함수
  - initialState :: useReducer의 초기 값
  - init :: 옵션 값으로 선택, Lazy initalizationd의 useRefucer 버전'

- Ex

// Ex :: useReducer
import React, { useReducer } from 'react';

const initialState = { count: 0 }; // 초기 값

function reducer(state, action) { // 업데이트 정의 함수
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

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

  return (
    <div>
      <p>현재 카운트: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>증가</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>감소</button>
    </div>
  );
}

 

---

참고

asac 수업자료

모던 리액트 Deep Dive