useReducer

1. 사용방법

1-1. useReducer Hooks 사용

• 설정 : reducer 함수, 초기값

  import { useReducer } from 'react';
  const [state, dispatch] = useReducer(reducer, 초기값);

1-2. reducer 함수 정의

• reducer 함수: 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수이다.

• 액션: type과 payload를 포함한 객체이다.

  • type: (필수속성) 액션의 종류를 나타내는 문자열이다.(대문자로 작성) 상태를 어떻게 변경할지 결정한다.
  • payload: (선택속성) 액션과 관련된 데이터를 담는 부분이다.(생략가능)

  type Action = {
    type: 'plus' | 'minus';
    payload?: number;
  };
  
  const reducer = (count: number, { type, payload }: Action) => {
    switch (type) {
      case 'plus':
        return count + (payload ?? 1);
      case 'minus':
        return count - 1;
      default:
        return count;
    }
  };

1-3. dispatch 사용

	dispatch({ type: 'plus', payload: value });

2. 응용

Context에서 사용하기

• useReduder 훅 사용 : reducer함수를 reducer로, 초기값은 0으로 설정한다.
• reducer 함수 정의
• dispatch 사용

// context 파일
type Action = { type: string; payload?: number };
const reducer = (count: number, { type, payload = 1 }: Action) => {
  switch (type) {
    case 'plus':
      return count + payload;
    case 'minus':
      return count - payload;
    default:
      return count;
  }
};
const CounterContextProvider = ({ children }: PropsWithChildren) => {
  const [count, dispatch] = useReducer(reducer, 0);
  const plusCount = () => dispatch({ type: 'plus', payload: 2 });
  const minusCount = () => dispatch({ type: 'minus' });
  
  return (
    <CounterContext.Provider value={{ count, plusCount, minusCount }}>
      {children}
    </CounterContext.Provider>
  );
}; 
// 다른 파일
const { count, minusCount } = useCounter();

3. useState와 useReducer의 차이점

• useState
  • 주로 단일의 상태변수를 다룬다.
  • 로직이 간단하고 직관적이다.
• useReducer
  • 객체 형태의 상태변수를 다룬다.
  • 여러 상태를 조합하거나 복잡한 로직을 다룬다.

// useState
const [count, setCount] = useState(0);
setCount(count + 1); // 단순히 현재 상태에 1을 더하는 예제

// useReducer
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
    case 'INCREMENT':
    return { count: state.count + 1 };
    // ...
}
};
const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'INCREMENT' }); // 복잡한 로직을 처리하는 예제