React와 Redux로 상태 관리 구현하기

React와 Redux로 상태 관리 구현하기

React는 웹 애플리케이션의 UI를 구성하는 데 사용되는 라이브러리입니다. 상태 관리는 애플리케이션의 복잡도가 증가함에 따라 중요한 요소가 되며, Redux는 React와 함께 사용되어 상태 관리를 효율적으로 할 수 있는 도구입니다. 이 글에서는 React와 Redux를 사용하여 상태 관리를 구현하는 방법에 대해 설명합니다.

1. Redux란?

Redux는 JavaScript 애플리케이션에서 상태를 관리하기 위한 라이브러리입니다. Redux는 상태를 직접 수정하지 않고, action 객체와 reducer 함수를 사용하여 새로운 상태를 생성하는 데 중점을 둡니다. 이를 통해 상태 관리가 예측 가능하고, 테스트하기 쉬운 구조가 됩니다.

2. Redux 설치 및 설정

React 프로젝트에서 Redux를 사용하려면 먼저 필요한 패키지를 설치해야 합니다.

npm install redux react-redux

설치가 완료되면, src 폴더에 store.js 파일을 생성하여 Redux store를 설정합니다.

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

const store = createStore(rootReducer);

export default store;

reducers 폴더에는 여러 reducer를 하나로 합치는 index.js 파일이 있어야 합니다.

import { combineReducers } from "redux";
import exampleReducer from "./exampleReducer";

const rootReducer = combineReducers({
  example: exampleReducer
});

export default rootReducer;

3. React에 Redux 연결하기

React 애플리케이션에 Redux를 연결하기 위해서는 react-redux 라이브러리의 Provider 컴포넌트를 사용해야 합니다. src/index.js 파일에서 Provider를 사용하여 Redux store를 애플리케이션에 전달합니다.

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")
);

4. 상태 관리 예제: 카운터

간단한 카운터 애플리케이션을 통해 React와 Redux를 사용한 상태 관리를 구현해 봅시다. 먼저, action type과 action creator를 정의합니다.

// src/actions/counterActions.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";

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

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

다음으로, reducer를 작성합니다.

// src/reducers/counterReducer.js

import {
    INCREMENT,
    DECREMENT
} from "../actions/counterActions";

const initialState = {
    count: 0,
};

const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case INCREMENT:
            return {
                ...state, count: state.count + 1
            };
        case DECREMENT:
            return {
                ...state, count: state.count - 1
            };
        default:
            return state;
    }
};

export default counterReducer;

이제 Counter 컴포넌트를 작성하고, Redux와 연결합니다.

// src/components/Counter.js

import React from "react";
import { connect } from "react-redux";
import { increment, decrement } from "../actions/counterActions";

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

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

const mapDispatchToProps = {
  increment,
  decrement,
};

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

Counter 컴포넌트를 사용하는 상위 컴포넌트에서 이 컴포넌트를 렌더링하면, 카운터 애플리케이션의 상태 관리가 완료됩니다.

// src/App.js

import React from "react";
import Counter from "./components/Counter";

const App = () => {
  return (
    <div>
      <Counter />
    </div>
  );
};

export default App;

이제 React와 Redux를 사용하여 상태 관리를 구현한 카운터 애플리케이션을 확인할 수 있습니다. 이러한 방식으로 다양한 애플리케이션에서 상태 관리를 할 수 있으며, 애플리케이션의 규모가 커져도 유지 보수가 용이해집니다.