리액트 Redux 사용법 예시

리액트 Redux 사용법 예시

Introduction

리액트는 현재 가장 인기있는 프론트엔드 프레임워크 중 하나입니다. 이러한 리액트를 좀 더 손쉽게 다룰 수 있도록 해주는 Redux에 대해 알아보겠습니다. 이번 글에서는 리액트와 Redux를 함께 사용하는 방법에 대해 예시를 통해 살펴보겠습니다.

Redux란?

Redux는 자바스크립트 어플리케이션에서 상태 관리를 위해 사용되는 도구입니다. 리액트에서 상태 관리를 하기 위해서는 props를 이용한 상태 전달이 필요하였습니다. 그러나 Redux는 상태를 전역으로 관리하므로, 여러 컴포넌트에서 동시에 참조하여 사용할 수 있습니다.

리액트와 Redux 연결

Redux를 리액트와 함께 사용하기 위해서는 react-redux 라이브러리를 사용하면 됩니다. 이 라이브러리를 사용하면 Redux store를 리액트 컴포넌트에 연결할 수 있습니다.

import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import App from './App';

const store = createStore(rootReducer);

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

export default ReduxApp;

Redux 사용 예시

Redux를 사용하여 간단한 카운터 어플리케이션을 만들어보겠습니다. 먼저, 액션 타입과 액션 생성자를 정의합니다.

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

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

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

그리고, 리듀서를 정의합니다.

import { INCREMENT, DECREMENT } from '../actions';

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;

마지막으로, 컴포넌트를 정의하고 Redux store와 연결합니다.

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

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

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

const mapDispatchToProps = {
  increment,
  decrement,
};

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

이렇게 작성된 코드를 실행하면 화면에 카운터 어플리케이션이 나타납니다.

Conclusion

Redux는 리액트에서 상태 관리를 좀 더 효율적으로 하기 위해 사용되는 라이브러리입니다. 이번 글에서는 Redux를 사용하는 방법과 예시를 살펴보았습니다. Redux를 사용하면 리액트의 복잡한 상태 관리를 더욱 효율적으로 할 수 있습니다.