자바스크립트 Immer를 활용한 실시간 주식 시세 애플리케이션 만들기

27 Sep 2023

immer

stock app

이번에는 Immer라는 라이브러리를 사용하여 자바스크립트를 이용한 실시간 주식 시세 애플리케이션을 만들어보도록 하겠습니다. Immer는 불변성을 유지하면서도 객체를 손쉽게 수정할 수 있게 도와주는 라이브러리입니다. 주식 시세 데이터가 실시간으로 업데이트되는 것을 다루기 때문에, 변경 가능한 상태를 관리하는 것이 중요한 요소입니다.

시작하기 전에

먼저, 이 예제를 실행하기 위해서는 Node.js와 npm을 설치해야 합니다. 설치가 완료되었다면, 새로운 프로젝트 폴더를 생성하고 해당 폴더에서 아래와 같이 명령어를 실행하세요.

npm init -y

이제 필요한 라이브러리를 설치합니다. Immer와 함께 immer-helper를 설치하겠습니다.

npm install immer immer-helper

애플리케이션 개발

데이터 구조 설정하기

먼저, 주식 시세 데이터를 담을 상태(State)를 설정해야 합니다. 주식의 목록과 시세 정보를 가진 객체를 포함하는 배열을 사용하여 데이터 구조를 설정해보겠습니다.

const state = {
  stocks: [
    { symbol: 'AAPL', price: 150.85 },
    { symbol: 'GOOGL', price: 2516.90 },
    { symbol: 'TSLA', price: 723.32 }
  ]
};

Immer를 활용한 상태 업데이트

이제 Immer를 사용하여 상태를 업데이트해보겠습니다. Immer의 produce 함수를 이용하면 변경 불가능한 새로운 상태를 생성하며, 필요에 따라 객체를 수정할 수 있습니다.

import produce from 'immer';
import { set } from 'immer-helper';

const newState = produce(state, (draft) => {
  draft.stocks.forEach((stock) => {
    if (stock.symbol === 'AAPL') {
      set(stock, 'price', 160.50); // 주식 가격 변경
    }
  });
});

produce 함수의 첫 번째 인자로 이전 상태를 전달하고, 두 번째 인자로 상태를 업데이트하는 함수를 전달합니다. 이 함수에는 draft라는 변경 가능한 프록시 객체가 전달되며, 이를 통해 상태를 업데이트할 수 있습니다.

위의 예제에서는 set 함수를 사용하여 주식 가격을 수정하였습니다. set 함수의 첫 번째 인자로 객체를, 두 번째 인자로 수정할 프로퍼티 이름을, 세 번째 인자로 수정할 값과 함께 전달하면 해당 객체의 프로퍼티가 수정되는 동시에 새로운 변경 불가능한 객체가 생성됩니다.

주식 시세 애플리케이션 개발

이제 주식 시세 애플리케이션을 개발해보겠습니다. 이 예제에서는 간단한 반응형 UI를 사용하고, 실제 데이터가 아닌 더미 데이터를 사용할 것입니다.

import React from 'react';
import produce from 'immer';
import { set } from 'immer-helper';

class StockApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stocks: [
        { symbol: 'AAPL', price: 150.85 },
        { symbol: 'GOOGL', price: 2516.90 },
        { symbol: 'TSLA', price: 723.32 }
      ]
    };

    this.updateStockPrice = this.updateStockPrice.bind(this);
  }

  updateStockPrice(symbol, newPrice) {
    this.setState(produce((draft) => {
      draft.stocks.forEach((stock) => {
        if (stock.symbol === symbol) {
          set(stock, 'price', newPrice);
        }
      });
    }));
  }

  render() {
    return (
      <div>
        {this.state.stocks.map((stock) => (
          <div key={stock.symbol}>
            <span>{stock.symbol}</span>
            <span>{stock.price}</span>
          </div>
        ))}
      </div>
    );
  }
}

위의 예제에서는 updateStockPrice 함수를 작성하여 주식 가격을 업데이트하는 로직을 추가하였습니다. 이 함수는 Immer를 사용하여 상태를 업데이트하고, setState 함수를 호출하여 컴포넌트를 다시 렌더링합니다.

주식 가격을 실시간으로 업데이트하는 코드는 본 예제의 범위를 벗어나므로 생략하겠습니다. 주식 시세 데이터를 가져오고 업데이트하는 로직은 실제 환경에서 구현해야 하는 부분입니다.

마치며

Immer를 활용하여 주식 시세 애플리케이션을 개발하는 방법을 알아보았습니다. Immer를 사용하면 불변성을 유지하면서도 더 쉽게 상태를 업데이트할 수 있습니다. 실시간 데이터를 다룰 때 유용하게 활용할 수 있는 기법입니다. 이 예제를 참고하여 실제로 동작하는 주식 시세 애플리케이션을 개발해보세요!

#javascript #immer #주식시세 #애플리케이션