[React] 효율적인 React 상태 관리를 위한 Redux 이해와 장단점 및 사용법

서론

이번에는 Redux가 무엇이며, 어떻게 상태관리를 진행하고, 장단점은 무엇인지? 그리고 Redux 외 다른 상태 관리 라이브러리는 무엇이 있는지에 대해 간략하게 이야기를 해볼려고 합니다.

Redux란 무엇인가요?

Redux는 애플리케이션 상태를 관리하고 중앙 집중화하도록 설계된 독립형 라이브러리입니다. 이는 단일 진실 소스(저장소)를 갖고, 순수 함수(리듀서)를 통해 상태 돌연변이를 예측 가능하게 만들고, 작업을 통해 상태가 복사 및 변경되는 방식을 지정하는 원칙에 따라 작동합니다.

Redux의 핵심 개념

• 저장: 애플리케이션 상태가 저장되는 중앙 장소입니다.
• 작업: 발생한 일을 나타내고 상태 변경을 설명하는 일반 JavaScript 개체입니다.
• 리듀서: 현재 상태와 액션을 인수로 취하고 새 상태를 반환하는 순수 함수입니다.

Redux의 장점과 단점

장점

• 예측 가능성: Redux는 단일 정보 소스와 순수 함수를 통해 앱 상태를 예측 가능하고 디버깅하기 쉽게 만듭니다.
• 유지관리성: Redux의 엄격한 구조로 인해 코드가 더욱 체계화되고 유지관리가 쉬워집니다.
• 개발자 도구: Redux에는 디버깅 및 상태 모니터링을 쉽게 해주는 강력한 개발자 도구가 있습니다.
• 커뮤니티 및 생태계: Redux는 수많은 리소스와 미들웨어를 통해 강력한 커뮤니티 지원을 누리고 있습니다.

단점

• 복잡성: 소규모 프로젝트의 경우 Redux는 불필요한 복잡성과 상용구 코드를 도입하여 과도할 수 있습니다.
• 학습 곡선: 초보자는 Redux를 학습하는 것, 특히 모든 부분이 어떻게 조화를 이루는지 이해하는 것이 어려울 수 있습니다.
• 보일러플레이트 코드: Redux를 사용하려면 많은 상용구 코드를 작성해야 하는데, 이는 일부 개발자에게 번거로울 수 있습니다.

Redux 사용 방법

다음은 React 애플리케이션에서 Redux를 사용하는 방법에 대한 간단한 예입니다. 이 예에서는 프로젝트에 react-redux 및 redux가 설치되어 있다고 가정합니다.

1. Actions

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

2. Reducer

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

export default counterReducer;

3. Store

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

 

4. Redux 사용하기

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

function Counter() {
  const count = useSelector((state) => state);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

export default Counter;

 

Redux 외 기타 상태 관리 라이브러리 종류

Redux와 같은 상태관리 라이브러리들은 MobX, Context API + useReducer(React에 내장됨), Zustand 및 Recoil 등이 있습니다.
해당 라이브러리 관련해서는 추후에 따로 다뤄보도록 하겠습니다.

결론

프로젝트 요구 사항에 따른 올바른 상태 관리 접근 방식을 선택하는 것의 중요합니다.

만약, 개발하는 환경에 대해서 Redux 및 기타 라이브러리를 탐색하여 개발 작업 흐름 및 프로젝트 요구 사항에 가장 적합한 것이 무엇인지 찾은 후 개발을 진행하는 것을 추천드립니다.