[REACT] 리액트 기초 프로젝트 - 차트(chart) 만들기

SimpleLineChart

우린 이런 멋진 차트를 만들기 위해 Recharts란 라이브러리를 사용하여 간편하게 만들 예정이에요.

 

Part 1 : React 설치하기

https://ssilook.tistory.com/entry/%EB%A6%AC%EC%97%91%ED%8A%B8React-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

[REACT] 리엑트 설치하기

 

Part 2: React 실행

 

 npm start 명령어를 통해 실행하시면 아래와 같은 화면이 표시됩니다.

 

Part 3 : Text Editor 사용하기

 

텍스트 에디터는 여러 가지가 있는데 "Visual Studio Code", "Atom", "Sublime Text" 

3개를 가장 많이 사용해서 편하신 코딩 에디터를 선택하시면 됩니다.

저는 Visual Studio Code를 사용해서 코딩을 진행하도록 할게요.

 

 

Part 4: 라이브러리 설치하기

 

 차트를 만들기 위해서는 라이브러리를 설치해 주셔야 합니다.

 설치 방법은 어렵지 않아요~  

 npm으로 명령어 복사해서 설치하시면 됩니다. 

  $ npm install recharts

 

Part 5: Code 세팅하기

 

 App.js 파일 내에 존재하는 div 안에 내용을 지워주고 깨끗한 화면에서 다시 시작할게요.

 코드가 지워지면 하얀색 백지 화면으로 나옵니다.

 

 

테이블 생성을 위해 src 폴더 내에 Rechart.js 파일 생성을 하고 코드를 붙여 넣을게요.

import React, { PureComponent } from "react";
import {
    LineChart,
    Line,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Legend,
    ResponsiveContainer,
} from "recharts";

const data = [
    {
        name: "Page A",
        uv: 4000,
        pv: 2400,
        amt: 2400,
    },
    {
        name: "Page B",
        uv: 3000,
        pv: 1398,
        amt: 2210,
    },
    {
        name: "Page C",
        uv: 2000,
        pv: 9800,
        amt: 2290,
    },
    {
        name: "Page D",
        uv: 2780,
        pv: 3908,
        amt: 2000,
    },
    {
        name: "Page E",
        uv: 1890,
        pv: 4800,
        amt: 2181,
    },
    {
        name: "Page F",
        uv: 2390,
        pv: 3800,
        amt: 2500,
    },
    {
        name: "Page G",
        uv: 3490,
        pv: 4300,
        amt: 2100,
    },
];

export default class Example extends PureComponent {
    static demoUrl = "https://codesandbox.io/s/simple-line-chart-kec3v";

    render() {
        return (
            <ResponsiveContainer width="100%" height="100%">
                <LineChart
                    width={500}
                    height={300}
                    data={data}
                    margin={{
                        top: 5,
                        right: 30,
                        left: 20,
                        bottom: 5,
                    }}
                >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="name" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Line
                        type="monotone"
                        dataKey="pv"
                        stroke="#8884d8"
                        activeDot={{ r: 8 }}
                    />
                    <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
                </LineChart>
            </ResponsiveContainer>
        );
    }
}

 

짜잔! 이런 화면이 나오게 되겠죠.

하지만 이걸 생성해도 아무 화면이 뜨지 않을 거예요~~

왜냐하면 우린 파일을 Import 하지 않았기 때문이에요.

 

App.js 에 코드를 추가해 보죠.

import logo from "./logo.svg";
import "./App.css";
import Rechart from "./Rechart";

function App() {
    return (
        <div style={{ width: 1000, height: 800 }}>
            <Rechart />
        </div>
    );
}

export default App;

 

이렇게 코드를 작성해 주시면 아까 우리가 작성한 테이블을 불러오게 됩니다.

 

아래 들어가시면 다른 차트들도 많으니 필요하신 부분 가져다 사용하시면 될꺼같아요~~

 

https://recharts.org/en-US/examples

 

이제 완료되었네요.

 

수고 많으셨어요~~