Redux와 React의 통합 방법

 

React 애플리케이션에서 상태 관리는 매우 중요한 부분입니다. 특히, 애플리케이션이 커지고 상태 관리가 복잡해질수록 이를 효율적으로 관리할 수 있는 도구가 필요합니다. Redux는 그러한 문제를 해결하기 위한 인기 있는 상태 관리 라이브러리입니다. 이 글에서는 Redux와 React를 통합하여 애플리케이션의 상태를 효과적으로 관리하는 방법을 자세히 알아보겠습니다.

1. Redux란 무엇인가?

Redux는 애플리케이션의 상태를 중앙에서 관리할 수 있도록 도와주는 JavaScript 라이브러리입니다. 상태를 한 곳에서 관리함으로써 데이터 흐름을 예측 가능하게 하고, 디버깅 및 테스트를 용이하게 만듭니다. Redux는 다음과 같은 세 가지 주요 원칙에 기반합니다:

• 단일 상태 트리(Single Source of Truth): 애플리케이션의 모든 상태는 하나의 스토어 안에 저장됩니다.
• 상태는 읽기 전용(Read-Only): 상태를 변경하려면 반드시 액션(action)을 통해야 합니다.
• 순수 함수로만 상태 변경(Pure Functions): 리듀서(reducer)는 순수 함수여야 하며, 이전 상태와 액션을 기반으로 새로운 상태를 반환합니다.

2. Redux와 React를 통합하는 이유

React는 컴포넌트 기반으로 상태를 관리하는 훌륭한 도구입니다. 하지만 컴포넌트 간 상태 공유가 복잡해질 때, Redux와 같은 상태 관리 라이브러리가 유용합니다. Redux와 React를 통합하면 다음과 같은 이점이 있습니다:

• 글로벌 상태 관리: 상태를 중앙에서 관리하여 여러 컴포넌트 간 데이터를 쉽게 공유할 수 있습니다.
• 예측 가능한 데이터 흐름: 상태 변경이 구조적으로 이루어지므로 디버깅과 유지보수가 용이합니다.
• 미들웨어를 통한 확장성: Redux는 미들웨어를 통해 비동기 작업 및 로깅과 같은 추가 기능을 쉽게 구현할 수 있습니다.

3. Redux와 React 통합 단계

Redux와 React를 통합하기 위해 다음 단계를 따라야 합니다:

3.1 Redux 설치

먼저 Redux와 React-Redux를 설치합니다. React-Redux는 Redux와 React를 연결하기 위한 공식 라이브러리입니다.

npm install redux react-redux

3.2 Redux 스토어 생성

Redux는 중앙에서 상태를 관리하는 스토어(Store)가 필요합니다. 스토어를 생성하려면 createStore 함수를 사용합니다. 또한, 리듀서를 정의해야 합니다.

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

// 초기 상태 정의
const initialState = {
  counter: 0
};

// 리듀서 정의
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { counter: state.counter + 1 };
    case 'DECREMENT':
      return { counter: state.counter - 1 };
    default:
      return state;
  }
};

// 스토어 생성
const store = createStore(counterReducer);

export default store;

3.3 React에 Redux 스토어 제공하기

React 애플리케이션에 Redux 스토어를 제공하려면 Provider 컴포넌트를 사용합니다. Provider는 React-Redux 라이브러리에서 제공하며, 애플리케이션 전체에서 Redux 스토어에 접근할 수 있도록 합니다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

3.4 React 컴포넌트와 Redux 연결하기

Redux 상태를 React 컴포넌트에 연결하려면 useSelector와 useDispatch 훅을 사용합니다.

상태 가져오기: useSelector

useSelector는 Redux 스토어의 상태를 읽을 때 사용됩니다.

// Counter.js
import React from 'react';
import { useSelector } from 'react-redux';

const Counter = () => {
  const counter = useSelector((state) => state.counter);

  return (
    <div>
      <h1>Counter: {counter}</h1>
    </div>
  );
};

export default Counter;

액션 디스패치: useDispatch

useDispatch는 Redux 액션을 컴포넌트에서 디스패치할 때 사용됩니다.

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

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

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

  return (
    <div>
      <h1>Counter: {counter}</h1>
      <button onClick={incrementHandler}>Increment</button>
      <button onClick={decrementHandler}>Decrement</button>
    </div>
  );
};

export default Counter;

4. 비동기 작업 처리하기

Redux에서 비동기 작업을 처리하려면 Redux Thunk와 같은 미들웨어를 사용할 수 있습니다. Thunk는 액션 생성자가 함수를 반환할 수 있게 하여 비동기 작업을 허용합니다.

Thunk 설치

npm install redux-thunk

Thunk 설정

// store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(counterReducer, applyMiddleware(thunk));

Thunk 사용

// actions.js
export const fetchCounter = () => {
  return async (dispatch) => {
    const response = await fetch('/api/counter');
    const data = await response.json();

    dispatch({ type: 'SET_COUNTER', payload: data.counter });
  };
};

// Counter.js
const fetchCounterHandler = () => {
  dispatch(fetchCounter());
};

5. 결론

Redux와 React를 통합하면 대규모 애플리케이션에서 상태 관리를 체계적으로 처리할 수 있습니다. 위 단계를 따라 기본적인 통합 방법을 익히고, 필요에 따라 미들웨어를 사용해 기능을 확장해보세요. Redux는 React 애플리케이션의 복잡성을 줄이고 유지보수성을 높이는 강력한 도구입니다.