Recharts로 React에서 차트를 만드는 방법

17219 단어 beginnersjavascriptreacttutorial

소개



데이터 시각화는 특히 프런트 엔드 개발 주기에서 항상 소프트웨어 엔지니어링의 중요한 구성 요소였습니다. 사용자가 애플리케이션에서 데이터를 시각화하여 진행 상황을 이해하는 것이 좋습니다.

Recharts은 React 구성 요소에 구축된 구성 가능한 차트 라이브러리입니다. React 애플리케이션에 차트를 원활하고 쉽게 통합할 수 있습니다.

이 문서에서는 ReactJS을 사용하여 간단한 애플리케이션에서 Recharts를 사용하는 방법을 보여줍니다.

API에서 암호화폐 가격을 가져와서 데이터 차트를 구성하는 대신 막대 차트에 표시하는 애플리케이션을 만들 것입니다.

CoinCap's API을 사용하면 React 애플리케이션에 대한 실시간 암호 화폐 가격을 얻을 수 있습니다.

전제 조건



따라 하려면 다음이 필요합니다.

  • Node.js 버전 16.16.0이 컴퓨터에 설치되어 있습니다.


  • 새로운 React 프로젝트 설정
    Create React App
  • IDE 또는 선택한 텍스트 편집기(예: Sublime Text 또는 Visual Studio Code)

    • React 프로젝트 설정



    위의 1단계에서 언급한 단계에 따라 프로젝트를 생성합니다. 다음 명령을 실행하여 시작하겠습니다.
    npx create-react-app react-recharts-tutorial

    We will now navigate to the project directory by running:

    cd react-recharts-tutorial

    I have chosen to name the project react-recharts-tutorial because we are learning how Recharts works in React.

    Currently, this is how my project structure looks.

    React 애플리케이션에 Recharts 설치

    To install Recharts, we run the following command:

    npm install recharts

    It is essential to verify the dependencies in the package.json file to confirm whether Recharts has been installed.

    This is the current state of my dependencies. 

    
//...

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "recharts": "^2.1.13",
    "web-vitals": "^2.1.4"
  },

  //...


    반응 코드 정리


    create react app 명령은 React 애플리케이션을 빠르게 부트스트랩하지만 제공하는 모든 기능이 필요하지 않기 때문에 사용 사례에 맞게 수정해야 합니다.
    이 경우 App.css 폴더 안에 logo.svg 또는 src가 필요하지 않습니다. App.js 의 모든 코드를 삭제할 수 있습니다.

    데이터 가져오기


    App.js 에서는 API에서 데이터를 가져와 차트를 렌더링할 별도의 구성 요소로 전달합니다.
    App.js의 내용을 아래 코드로 바꾸겠습니다.



    import { useEffect, useState } from "react";

export default function App() {
  const [data, setdata] = useState();

  useEffect(() => {
    const fetchDatas = async () => {
      const res = await fetch("https://api.coincap.io/v2/assets/?limit=20");
      const data = await res.json();
      console.log(data);
      setdata(data?.data);
    };
    fetchDatas();
  }, []);

  return <div className="App">How to use Recharts with React</div>;
}



    CoinCap API를 쿼리하는 fetchData라는 함수를 작성했습니다.

    API는 기본적으로 100개의 암호화폐 객체가 포함된 데이터 속성을 반환합니다. 데이터 상태에 저장된 처음 20개 객체만 요청하기 위해 URL 끝에 limit 매개변수를 추가했습니다.

    또한 fetchData는 빈 종속성 배열이 있는 useEffect hook에서 호출되어 앱 구성 요소가 마운트되는 즉시 함수가 실행됨을 나타냅니다.

    다음 단계는 다음과 같이 애플리케이션을 시작하는 것입니다.
    npm start

    We should have something that looks like the image below.

    Let's see what the data we fetched looks like in the console:

    We should have something that looks like the image below.

    In order to create our chart, we will only need the name and priceUsd properties from the data.

    차트 구성요소

    In the src directory, we create a Chart.js file and add the code below:

    import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

export default function Chart({ data }) {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <BarChart
        data={data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="name" fill="#8884d8" />
        <Bar dataKey="priceUsd" fill="#82ca9d" />
      </BarChart>
    </ResponsiveContainer>
  );
}
    Chart.js 파일에서 데이터를 나타내기 위해 Recharts BarChart , Bar , XAxis , YAxis , CartesianGrid , Tooltip , Legend , ResponsiveContainer 에서 다음 구성 요소를 가져옵니다. 또한 우리는 data를 소품으로 전달했습니다.

    다음으로 Chart.js 구성 요소를 app.js 파일에 추가하고 data를 전달합니다.
    상태를 Chart.js로 prop.로

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

export default function App() {
  const [data, setdata] = useState();

  useEffect(() => {
    const fetchDatas = async () => {
      const res = await fetch("https://api.coincap.io/v2/assets/?limit=20");
      const data = await res.json();
      console.log(data);
      setdata(data?.data);
    };
    fetchDatas();
  }, []);

  return (
    <div className="App">
      How to use Recharts with React
      <Chart data={data} />
    </div>
  );
}


    최종 코드를 실행하기 위해 아래 단계를 따를 수 있습니다.
    npm start

    아래 이미지와 같은 것이 있어야 합니다.



    결론



    이 기사에서는 Recharts 및 React를 사용하여 웹 사이트에 차트를 표시하는 방법을 보여주지만 훨씬 더 나아갑니다.

    Recharts 및 차트를 사용자 지정하는 방법에 대한 자세한 내용은 Recharts 웹 사이트를 방문하십시오.


    읽어주셔서 감사합니다 🌟🎉

    당신이 기사를 즐겼다는 것을 알게되어 기쁩니다. 댓글 섹션에서 어떻게 생각하는지 알려주세요.

    에서 당신과 연결하고 싶습니다

    다른 블로그에서 다른 날, 그때까지 Femi👋.
    퀵 정렬을 이해하는 가장 쉬운 방법🔥
    IAM 역할을 사용하여 EC2 Linux에 S3 버킷을 마운트하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage