[React] React와 Redux : 상태관리의 강력한 조합

React는 사용자 인터페이스를 구축하는 데 매우 유용한 라이브러리입니다. 컴포넌트 기반의 아키텍처 덕분에 재사용성과 유지보수가 뛰어나죠. 하지만 React만으로는 복잡한 애플리케이션의 상태(state)를 관리하는 데 한계가 있습니다.

여기서 Redux가 등장합니다. Redux는 애플리케이션의 상태를 효율적으로 관리하고 예측 가능한 상태 변화를 가능하게 해줍니다.

---

Redux란 무엇인가?

Redux는 JavaScript 애플리케이션의 상태 관리를 위한 라이브러리입니다. Redux 는 단일 상태 트리 (single state tree)를 유지하며, 상태의 변경은 순수 함수인 리듀서(reducer)에 의해 처리됩니다.

Redux의 주요 개념을 이해하기 위해 세가지 기본 원칙을 알아보겠습니다.

 

  1. 단일 진실의 원천 (Single Source of Truth)

       Redux는 애플리케이션의 모든 상태를 하나의 객체 트리 안에 저장합니다. 이 객체 트리는 "스토어(store)"라고 불리며,이는 애플리케이션의 중앙 저장소 역할을 합니다. 이로 인해 상태를 예측 가능하게 관리할 수 있습니다.

  2. 상태는 읽기 전용 (State is Read-Only)

       상태를 직접 변경할 수 없습니다. 상태를 변경하는 유일할 방법은 액션(action) 을 보내는 것입니다. 액션은 상태의 변경을 설명하는 객체로, 최소한 'type'속성을 포함합니다.

  3. 상태변경은 순수 함수로만 수행 (Changes are Made whith Pure Functions)

       리듀서(reducer)는 순수 함수로, 이전 상태와 액션을 받아 새로운 상태를 반환합니다. 리듀서는 부작용을 일으키지 않으며, 동일한 입력에 대해 항상 동일한 출력을 제공합니다.

---

Redux의 주요 구성 요소

Redux를 제대로 이해하려면, 다음과 같은 구성 요소들을 알아야합니다.

 

1. 스토어(Store)

    스토어는 애플리케이션의 상태 트리를 저장합니다. 'createStore' 함수를 사용하여 스토어를 생성합니다.

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

 

2. 액션(Actions)

     액션은 상태에 어떤 변화가 일어나야 하는지 설명하는 객체입니다. 액션은 'type'속성과 추가적인 데이터는 포함할수 있습니다.

const increment = () => ({
  type: 'INCREMENT'
});

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

 

3. 리듀서 (Reducers)

    리듀서는 이전 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수 입니다. 여러 리듀서를 결합하여 루트 리듀서를 생성 할 수 있습니다.

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

export default counter;

 

4. 디스패치 (Dispatch)

    디스패치는 액션을 스토어로 보내는 함수입니다. 액션이 디스패치되면, 스토어는 리듀서를 호출하여 새로운 상태를 계산합니다.

store.dispatch(increment());
store.dispatch(decrement());

 

5. 구독(Subscribe)

    스토어의 상태가 변경될 때마다 특정 로직을 실행하고 싶을 때 'subscribe'메서드을 사용합니다. 이는 상태가 변경될 때마다 호출됩니다.

store.subscribe(() => {
  console.log(store.getState());
});

---

React와 Redux의 통합

 React와 Redux 를 통합하기 위해서는 'react-redux'라이브러리를 사용합니다. 이 라이브러리는 React컴포넌트가 Redux스토어와 상호작용할 수 있게 해줍니다. 주요 기능은 다음과 같습니다.

 

1. Provider

    Provider 컴포넌트는 React 컴포넌트 트리에 Redux 스토어를 공급합니다. 루트 컴포넌트를 Provider로 감싸야합니다.

import { Provider } from 'react-redux';
import store from './store';

const App = () => (
  <Provider store={store}>
    <YourMainComponent />
  </Provider>
);

 

2. connect

    'connect' 함수는 React 컴포넌트는 React 스토어에 연결합니다. 이 함수는 두개의 인수를 받습니다. 

    'mapStateToProps' 와 'mapDispatchToProps'

import { connect } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = ({ count, increment, decrement }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={increment}>+</button>
    <button onClick={decrement}>-</button>
  </div>
);

const mapStateToProps = state => ({
  count: state
});

const mapDispatchToProps = {
  increment,
  decrement
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

---

Redux 는 상태 관리가 복잡해지는 대규모 React 애플리케이션에서 특히 유용합니다. Redux의 단일 상태 트리, 액션을 통한 상태 변경, 순수 함수 리듀서의 원칙은 상태 관리의 예측 가능성과 유지보수성을 높여줍니다. React와 Redux를 함께 사용하면, 애플리케이션의 상태를 체계적이고 효율적으로 관리할 수 있습니다.