[react] 리덕스 리듀서

22 Dec 2023

react

리덕스는 상태 관리 라이브러리로, 애플리케이션의 상태를 예측 가능한 방식으로 관리할 수 있게 해줍니다. 리덕스와 함께 사용되는 리듀서는 액션에 따라 상태가 어떻게 변경되는지 지정하는 함수입니다.

이 포스트에서는 리액트 어플리케이션에서 리덕스 리듀서를 어떻게 구현하는지에 대해 알아보겠습니다.

리듀서란?

리듀서는 이전 상태와 액션을 인자로 받아 새 상태를 반환하는 순수 함수입니다. 순수 함수는 부작용이 없고 항상 동일한 입력에 대해 동일한 출력을 반환합니다.

다음은 간단한 카운터 예제를 통해 리듀서 동작 방식을 설명한 코드입니다.

function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

이 예제에서 counterReducer 함수는 현재 상태와 액션을 받아 상태를 변경하고 반환합니다.

리듀서 구현하기

리듀서는 단일 파일에 작성되거나 각 기능 또는 모듈 당 하나의 파일로 분리되어 작성될 수 있습니다. 예를 들어, 사용자 관련 상태를 관리하는 userReducer와 게시물 관련 상태를 관리하는 postReducer 등으로 분리할 수 있습니다.

다음은 userReducer 예제입니다.

const initialState = {
  name: '',
  email: ''
};

function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_NAME':
      return { ...state, name: action.payload };
    case 'UPDATE_EMAIL':
      return { ...state, email: action.payload };
    default:
      return state;
  }
}

위의 예제에서 userReducer는 초기 상태와 액션에 따라 상태를 변경하고 반환하는 방식으로 동작합니다.

결론

리덕스 리듀서는 상태의 변경 로직을 순수 함수로 구현하여 예측 가능하고 효율적인 상태 관리를 가능하게 합니다. 애플리케이션의 규모가 커질수록 리덕스 리듀서의 중요성은 더 커집니다.

리듀서를 구현하는 방법에 대해 이해하고, 실제 프로젝트에 적용해보면서 리덕스의 강력함을 느껴보시기를 권장합니다.

리듀서란?

리듀서 구현하기

결론

참고 자료