React

useReducer 동작 순서

neal89 2025. 4. 15. 12:26

1. 컴포넌트가 마운트될 때

  • 초기 실행 및 상태 생성
    • 컴포넌트가 처음 렌더링될 때, useReducer는 두 개의 인자—reducer 함수와 initialState—를 받아 초기 상태를 설정합니다.
    • 이때, reducer 함수는 바로 호출되지 않고, 초기 상태가 그대로 반환됩니다.
    • useReducer는 배열 [state, dispatch]를 리턴하는데, 여기서 state는 초기 상태, dispatch는 나중에 액션을 보낼 때 사용하는 함수입니다.

예시 코드:

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

동작 순서 1:

  • 컴포넌트 마운트 → useReducer 호출 → 초기 상태(initialState) 설정 → [state, dispatch] 반환 → 컴포넌트 렌더

2. 컴포넌트 렌더

  • 렌더링
    • 반환된 상태(state)를 기반으로 컴포넌트가 렌더링됩니다.
    • 이 단계에서는 reducer 함수 내부 로직은 실행되지 않으며, 그저 초기 상태 데이터를 이용해 UI를 구성합니다.

3. 액션 디스패치 (dispatch 호출)

  • 사용자 인터랙션 혹은 기타 이벤트:
    • 버튼 클릭, 입력값 변화 등으로 인해 dispatch 함수가 호출되면, 특정 액션 객체가 전달됩니다.
    • 이 액션 객체는 보통 { type: 'ACTION_TYPE', data: payload } 형태입니다.

예시:

dispatch({ type: 'CREATE', data: newTodo });

동작 순서 2:

  • dispatch 호출 → 현재 상태와 전달된 액션 객체를 reducer 함수에 전달

4. reducer 함수 실행

  • 상태 업데이트 로직 수행
    • React는 전달된 액션을 처리하기 위해 reducer 함수를 실행합니다.
    • reducer 함수는 현재 상태와 액션을 받아 새 상태를 반환하는 순수 함수여야 합니다.

예시 reducer:

function reducer(state, action) {
  switch (action.type) {
    case 'CREATE':
      return [action.data, ...state];
    // 다른 액션 처리...
    default:
      return state;
  }
}

동작 순서 3:

  • reducer(state, action) 호출 → 새 상태 반환

5. 상태 업데이트 후 리렌더링

  • 새로운 상태 반영
    • reducer가 반환한 새로운 상태가 useReducer에 의해 설정되고,
      이로 인해 해당 컴포넌트는 리렌더링됩니다.
    • 이전의 상태와 비교해서 변경된 부분이 있으면 그에 따라 UI가 업데이트됩니다.

동작 순서 4:

  • 새 상태 적용 → 컴포넌트 리렌더링 → 업데이트된 UI 표시

6. 클린업 및 최종 정리

  • 배치(Batching)
    • 만약 여러 액션을 짧은 시간 내에 연속으로 디스패치하면, React는 이들을 배치 처리하여 한 번의 리렌더링으로 묶어 처리할 수 있습니다.
  • 리듀서 함수의 특성
    • reducer 함수는 순수 함수여야 하며, 동일한 상태와 액션이면 항상 동일한 결과를 반환해야 합니다.
    • 이러한 특성 덕분에 상태 업데이트가 예측 가능하고 디버깅하기가 쉬워집니다.

전체 동작 순서 요약

  1. 컴포넌트 마운트: useReducer 호출 → 초기 상태 설정 → [state, dispatch] 반환
  2. 초기 렌더링: 초기 상태를 기반으로 UI 렌더링
  3. dispatch 호출: 특정 이벤트(예: 버튼 클릭)로 액션 디스패치
  4. reducer 실행: 현재 상태와 액션을 받아 새로운 상태를 반환
  5. 상태 업데이트 및 리렌더링: 새 상태가 적용되어 컴포넌트 리렌더링

이러한 과정을 통해 useReducer 훅은 복잡한 상태 관리 로직을 단순화하고, 여러 상태 업데이트를 하나의 리듀서 함수로 일원화할 수 있게 해줍니다. 이 순서를 잘 이해하면, Redux와 같은 전역 상태 관리 도구의 개념도 자연스럽게 파악할 수 있습니다.

포스팅이 useReducer 동작 순서를 이해하는 데 도움이 되길 바랍니다. 추가 질문이나 의견이 있다면 댓글로 남겨주세요!