Colin's Blog
자바스크립트 Immer를 활용한 동적 차트 애플리케이션 만들기

chart

개요

이번 포스트에서는 자바스크립트의 Immer 라이브러리를 활용하여 동적 차트 애플리케이션을 만들어보겠습니다.

Immer는 불변성을 유지하는 데 도움이 되는 라이브러리로, 복잡한 상태 관리 로직을 간결하게 작성할 수 있도록 도와줍니다. 이를 활용하여 동적으로 데이터를 업데이트하고 차트를 그릴 수 있는 애플리케이션을 구현해보겠습니다.

사전 준비

이 예제에서는 다음과 같은 기술 스택을 사용합니다.

위 기술들에 대한 기본적인 이해가 있다는 가정하에 진행하겠습니다.

설치 및 설정

프로젝트 생성

$ npx create-react-app dynamic-chart-app

의존성 설치

$ cd dynamic-chart-app
$ npm install immer react-chartjs-2 chart.js

애플리케이션 구현

상태 관리

먼저, Immer를 활용하여 상태를 관리하는 코드를 작성해보겠습니다. 다음은 초기 상태와 액션을 처리하는 리듀서 함수입니다.

import produce from 'immer';

const initialState = {
  data: [],
};

const reducer = (state = initialState, action) => {
  return produce(state, draft => {
    switch (action.type) {
      case 'ADD_DATA':
        draft.data.push(action.payload);
        break;
      case 'REMOVE_DATA':
        draft.data.splice(action.payload, 1);
        break;
      default:
        break;
    }
  });
};

컴포넌트 구현

다음으로, 차트를 표시하고 데이터를 추가 및 제거할 수 있는 컴포넌트를 구현해보겠습니다.


import React, { useState } from 'react';
import { Bar } from 'react-chartjs-2';
import { useDispatch, useSelector } from 'react-redux';

const ChartComponent = () => {
  const [dataPoint, setDataPoint] = useState('');
  const dispatch = useDispatch();
  const data = useSelector(state => state.data);

  const handleAddData = () => {
    dispatch({ type: 'ADD_DATA', payload: dataPoint });
    setDataPoint('');
  };

  const handleRemoveData = (index) => {
    dispatch({ type: 'REMOVE_DATA', payload: index });
  };

  return (
    <div>
      <Bar
        data={{
          labels: data.map((d, index) => `Data ${index + 1}`),
          datasets: [
            {
              label: 'Chart Data',
              data: data,
              backgroundColor: 'rgba(75, 192, 192, 0.2)',
              borderColor: 'rgba(75, 192, 192, 1)',
              borderWidth: 1,
            },
          ],
        }}
        options={{
          maintainAspectRatio: false,
        }}
      />
      <input
        type="text"
        value={dataPoint}
        onChange={(e) => setDataPoint(e.target.value)}
      />
      <button onClick={handleAddData}>Add Data</button>
      <ul>
        {data.map((d, index) => (
          <li key={index}>
            Data {index + 1}: {d}
            <button onClick={() => handleRemoveData(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ChartComponent;

애플리케이션 라우팅

마지막으로, 애플리케이션의 라우팅을 구현하고 차트 컴포넌트를 사용하는 코드를 작성해보겠습니다.

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ChartComponent from './ChartComponent';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={ChartComponent} />
      </Switch>
    </Router>
  );
};

export default App;

결론

이제 자바스크립트의 Immer 라이브러리를 활용하여 동적 차트 애플리케이션을 만들었습니다. Immer의 강력한 기능을 활용하여 복잡한 상태 관리 로직을 간단하게 작성할 수 있습니다. 차트 라이브러리인 Chart.js와 조합하여 데이터를 추가 및 제거하고 차트를 표시할 수 있는 기능을 구현했습니다. 이제 이 애플리케이션을 확장하거나 커스터마이징하여 원하는 동적 차트 기능을 구현할 수 있습니다.

#javascript #immer #차트

© 2018 Colin. All rights reserved.