Redux Thunk를 이용한 인터랙티브한 그래프 시각화 예제

18 Oct 2023

redux

이 예제에서는 Redux Thunk를 사용하여 인터랙티브한 그래프 시각화를 구현해보겠습니다. Redux Thunk는 Redux 미들웨어로 비동기 작업을 처리하면서 액션을 디스패치하는 것을 가능하게 해줍니다. 그래프 시각화는 D3.js를 사용하여 구현할 것입니다.

프로젝트 설정

먼저, 프로젝트를 설정해야 합니다. 다음 명령어를 사용하여 프로젝트를 생성합니다:

$ npx create-react-app graph-visualization

프로젝트 폴더로 이동한 후, Redux와 Redux Thunk를 설치합니다:

$ cd graph-visualization
$ npm install redux react-redux redux-thunk

또한 D3.js도 설치해야 합니다:

$ npm install d3

Redux Store 설정

Redux Store를 설정하기 위해 src 폴더 내에 store.js 파일을 생성합니다. 다음 코드를 추가합니다:

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";

// 리듀서와 초기 상태를 import 해옵니다.
import rootReducer from "./reducers";
import initialState from "./initialState";

// Redux Thunk 미들웨어를 추가합니다.
const middleware = [thunk];

// 스토어를 생성합니다.
const store = createStore(rootReducer, initialState, applyMiddleware(...middleware));

export default store;

비동기 액션 생성자 구현

그래프 데이터를 가져오는 비동기 액션 생성자를 구현해보겠습니다. src 폴더 내에 actions/graphActions.js 파일을 생성하고 다음 코드를 추가합니다:

import axios from "axios";

// 그래프 데이터를 가져오는 액션 타입
export const FETCH_GRAPH_DATA_SUCCESS = "FETCH_GRAPH_DATA_SUCCESS";

// 비동기 액션 생성자
export const fetchGraphData = () => {
  return async dispatch => {
    try {
      const response = await axios.get("http://example.com/graphData");
      dispatch(fetchGraphDataSuccess(response.data));
    } catch (error) {
      console.error("Failed to fetch graph data:", error);
    }
  };
};

// 그래프 데이터 가져오기 성공 액션 생성자
export const fetchGraphDataSuccess = graphData => ({
  type: FETCH_GRAPH_DATA_SUCCESS,
  payload: graphData
});

리듀서 구현

다음으로, 리듀서를 구현합니다. src 폴더 내에 reducers/graphReducer.js 파일을 생성하고 다음 코드를 추가합니다:

import { FETCH_GRAPH_DATA_SUCCESS } from "../actions/graphActions";

// 초기 상태
const initialState = {
  graphData: null
};

// 그래프 리듀서
const graphReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_GRAPH_DATA_SUCCESS:
      return {
        ...state,
        graphData: action.payload
      };
    default:
      return state;
  }
};

export default graphReducer;

컴포넌트 구현

마지막으로, 컴포넌트를 구현하여 그래프를 시각화하고 Redux Store에서 데이터를 가져오는 것을 처리합니다. 이부분은 개발자가 고유한 구현을 할 수 있으므로 코드 예제를 다루기는 어렵습니다.

실행

모든 설정이 완료되었습니다. 다음 명령어를 사용하여 프로젝트를 실행합니다:

$ npm start

브라우저에서 http://localhost:3000을 열어보면 인터랙티브한 그래프 시각화가 표시됩니다.

결론

이 예제에서는 Redux Thunk를 사용하여 비동기 작업을 처리하고, D3.js를 사용하여 인터랙티브한 그래프 시각화를 구현하는 방법을 살펴보았습니다. Redux Thunk는 Redux의 기능을 확장하여 애플리케이션의 복잡한 비동기 작업을 더욱 효율적으로 관리할 수 있게 도와줍니다.