[React] useReducer vs useState: 언제 어떤 Hook을 사용해야 할까?"

 

단순한 상태 관리, 독립적인 상태 값들, 상태 업데이트 로직이 간단할 때는 useState 를 사용하며,

 

1. 복잡한 상태 로직일 때

여러 상태가 서로 연관되어 있을 때
이전 상태를 기반으로 다음 상태를 결정해야 할 때

 

2. 상태 업데이트가 여러 단계를 거쳐야 할 때

장바구니 기능 (추가, 삭제, 수량 변경 등)
폼 관리 (여러 입력 필드의 유효성 검사)

 

3. 상태 관리 로직을 한 곳에서 관리하고 싶을 때

 

useReducer 를 사용하면 됩니다.

 

 

 

좀 더 쉽게 설명하자면, 은행의 입금, 출금, 송금 등 각기 다른 조건의 로직을 가지고 state 값을 변경하고자 

한다면 useState 가 아닌 useReducer 를 사용하면 되는 겁니다.

 

이 때, 입금자 대신 은행이 입금 출금 송금 등의 역할을 대신 해주는 데 이게 reducer

입금자의 XX 를 해달라고 요청하는 걸 dispatch,
그리고 이 요청의 내용( 입금 출금 송금  중 무엇인지) 이 명시되어 있는 걸 action 이라고 이해하면 됩니다.

 

위 설명과 비슷한 예시로 장바구니 로직, 폼 관리 (여러 입력 필드의 유효성 검사) 등의 상황에서도

사용 가능합니다.

 

기본 구문

const [state, dispatch] = useReducer(reducer, initialState)

 

 

사용 예시

// 장바구니 관리 예시
const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.item];
    case 'REMOVE_ITEM':
      return state.filter(item => item.id !== action.id);
    case 'UPDATE_QUANTITY':
      return state.map(item => 
        item.id === action.id 
          ? {...item, quantity: action.quantity}
          : item
      );
    default:
      return state;
  }
};

// 컴포넌트에서 사용
const [cartState, dispatch] = useReducer(cartReducer, []);

// 사용 예
dispatch({ type: 'ADD_ITEM', item: newItem });