[React] Apexcharts를 사용한 실시간 업데이트 데이터 - JSON API

A guide on how to display live data fetched from a fake JSON API using React & react-apexcharts apexchart.
전부는 아니더라도 많은 거래 웹사이트는 많은 사용 사례에 대한 실시간 데이터를 표시하는 애니메이션 차트를 사용합니다. 이 튜토리얼에서는 React 프로젝트에서 동일한 기능을 구현하는 방법을 안내합니다.

바로 뛰어들자.

전제 조건

Reactjs, React hook, TailwindCSS, 및 JSON API에 대한 기본적인 이해.

로컬 시스템에서 저장소를 복제하려면 여기GitHub를 클릭하십시오. (응용 프로그램 실행 방법은 .ReadMe 파일의 지침을 따르십시오).

데모


리포지토리를 복제하지 않은 경우 필수 구성 요소의 링크를 확인하세요.

✅웹 앱과 서버가 실행 중이라고 가정합니다.

JSON 서버 부분server directory에는 가짜 데이터베이스가 될 data.json라는 파일이 있습니다.
보시다시피 빈 json 객체가 있습니다.
나중에 데이터를 추가할 예정입니다.

클라이언트 부분web-client directory에서 src 내부에는 Chart 및 FiciGame이라는 2개의 폴더가 있습니다.
FiciGame 내부에는 UpdateFici.js 및 index.jsx라는 두 개의 파일이 더 있고 차트에는 index.jsx가 있습니다.
UpdateFici.js 내부에서 임의의 데이터를 JSON 서버로 보내는 함수를 만들 것입니다.

import moment from 'moment';

export const sendRandomData = async () => {
    const currentDate = new Date();
    const randNumber = Math.floor(Math.random() * 100);
    const showDate = moment(currentDate).format('HH:mm:ss');
    const doc = {
        time: showDate,
        bid: randNumber,
    }
    await fetch('http://localhost:7000/data', {
        method: 'POST',
        body: JSON.stringify(doc),
        headers: { 'Content-Type': 'application/json' }
    })
}

보시다시피 time 및 randomNumber 와 함께 개체를 보내고 있으며 나중에 차트 구성 요소에서 사용할 것입니다.

다음으로 index.jsx 내부에서 sendRandomData를 가져오고 두 개의 함수를 생성합니다. 첫 번째는 setIntervals 의 도움으로 2초마다(밀리초 => 2000) useEffect 내에서 가져오기 함수를 호출합니다.

import {useEffect,useState} from "react";
import { sendRandomData } from "./UpdateFici";

 // Fetch data from the fake API
    const fetchFici = async () => {
        const response = await fetch('http://localhost:7000/data')
        console.log(response);
        response.json().then(data => {
            setBidData(data)
        })
    }

    // Call the fetchFici function every 2 seconds
    useEffect(() => {
        const timer = setInterval(() => {
            fetchFici()
        }, 2000);
        return () => { clearInterval(timer) }
    }, [])

두 번째는 매 4초마다 앞서 생성한 sendRandomData 함수를 호출합니다.

 useEffect(() => {
        const timer2 = setInterval(() => { sendRandomData() }, 4000);
        return () => { clearInterval(timer2) }
    }, [])

다음으로 데이터가 실시간으로 표시되는 차트를 만들어야 합니다. 이를 위해 Chart 폴더의 index.jsx로 이동하고 아래에 이 코드를 추가합니다.

import React from 'react'
import Chart from "react-apexcharts";

const ApexChart = ({ data }) => {
    return (
        <div>
            <Chart
                type="area"
                height={300}
                width='100%'
                series={[
                    {
                        name: "Commits",
                        data: data?.map(data => data.bid)
                    }
                ]}

                options={{
                    chart: {
                        toolbar: {
                            show: false
                        },

                    },
                    colors: ['#f90000'],
                    stroke: { width: 1, curve: 'smooth' },
                    dataLabels: { enabled: false },
                    xaxis: {
                        categories: data?.map(data => data.time),

                    },
                    yaxis: {
                        show: false,
                    }
                }}
            />
        </div>
    )
}

export default ApexChart

이 스니펫 코드는 무엇을 합니까? react-apexcharts에서 차트 구성 요소를 가져온 다음 가짜 API에서 가져온 데이터를 수신할 매개 변수를 전달하는 ApexChart 내에서 호출합니다. 데이터는 개체(시간 및 입찰가)를 반환합니다.

그런 다음 ApexChart 구성 요소 내에서 데이터를 통해 매핑하고 범주에서 데이터와 시간에 입찰을 전달합니다. (아직 데이터를 사용할 수 없는 경우 오류를 방지하기 위해 ?를 사용했습니다.)

마지막으로 FiciGame에서 ApexChart를 가져오고 가짜 API에서 받은 데이터를 전달합니다.

import ApexChart from "../Chart";
...
 return (
        <ApexChart data={bidData} />
    )

모든 것이 완벽하게 작동하면 이제 페이지를 새로고침하고 서버 저장소에서 data.json 파일을 확인할 수 있습니다. 데이터가 자동으로 추가되는 것을 볼 수 있습니다.

결과:


이것은 실시간 데이터의 시뮬레이션 업데이트의 완벽한 기본 예입니다. 원하는 대로 사이드 프로젝트에서 조정하거나 훨씬 더 좋게 만들 수 있습니다.
사이드노트📝

In your devTool, in the network tab, you will see requests are sent every 3 seconds, If you are planning to use an API that updates its data every second, I will suggest you read more about WebSocket.

튜토리얼이 끝났습니다. 이것이 apexcharts를 사용하는 소규모 프로젝트에 대한 실시간 데이터 업데이트를 통합하는 방법에 대한 좋은 아이디어가 되었기를 바랍니다.

GitHub 이 프로젝트의 소스 코드입니다.

차트 확인을 사용자 정의하려는 경우apexcharts documentation .
다른 질문 있나요? 아래에 의견을 남기거나 나와 채팅하십시오.