[React] useReducer

useReducer

• 상태 관리를 위한 Hook
• 컴포넌트, 상태 업데이트 로직 분리 ⭐️ → 컴포넌트 외부에서도 상태 관리 가능
  
• 여러 값이나 여러 층의 자식 컴포넌트들에 걸쳐있는 상태를 다룰 때 유용
• useState보다 더 복잡한 상태 로직 다룰 때 사용 → (공식문서 피셜) useState 대체 함수
  

useReducer 사용법

• const [state, dispatch] = useReducer(reducer, initialState, init);
• reducer
  • (state, action) => newState) 형태의 함수
  • 이전 상태와 액션 객체를 받아 새로운 상태 반환
  • 일반적으로 type 필드 포함 → type은 주로 대문자로 구성 (관습)

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

• initialState
  • reducer의 첫 번째 호출에 사용될 초기 상태
• init

  • 초기 상태를 지연 초기화하기 위한 함수

    [지연 초기화] 초기 상태값을 설정하는 과정을 컴포넌트가 렌더링되는 시점이 아니라 해당 상태가 필요한 시점까지 늦추는 기법 초기 상태를 설정하는 작업을 지연시켜 필요한 순간에 수행

  • initialState를 인자로 받아 실제 초기 상태를 반환

    function init(initialCount) {
    	return {count: initialCount};
    }
    const [state, dispatch] = useReducer(reducer, initialCount, init);

• dispatch

  • 액션 발생시키는 함수

  • 액션 객체 인자로 받음

    → 해당 객체는 reducer 함수에 전달

    dispatch({type: 'INCREMENT'})
    dispatch({type: 'DECREMENT'})

사용 사례

• 다음과 같은 상황에서 useState 보다 더 적합
  • 상태 업데이트 로직이 복잡할 때
  • 다음 상태가 이전 상태에 의존적일 때
  • 여러 하위값이 포함된 상태 객체를 관리할 때
  • 상태 업데이트 로직을 컴포넌트 밖으로 빼내고 싶을 때
• 예제

  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:
        throw new Error();
    }
  } // 컴포넌트 외부에 state 업데이트 로직 존재
  
  function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
      <>
        Count: {state.count}
        <button onClick={() => dispatch({type: 'DECREMENT'})}>-</button>
        <button onClick={() => dispatch({type: 'INCREMENT'})}>+</button>
      </>
    );
  }

useState vs. useReducer

	useState	useReducer
state 개수	1개	1개 이상
state 자료형	원시타입	복잡한 구조

~일 경우 추천한다!

useReducer 단점

• 복잡성 증가 : useState 보다 더 많은 보일러플레이트 코드 필요
• 오버엔지니어링

→ state 가 단순할 경우엔 useState 사용