react 동적으로 데이터받기(axios? props?)

사실 제가 그래프를 그리고자 하는데 드래그로 줌기능이 되는 차트 라이브러리를 사용하고자 합니다. (rechart)

그런데 보니깐 class문법이라서 제가 코딩애플에서 배운건 function 문법이다 보니.. 좀 어렵더라구요

그래서 젤 상위에 있는 initialData만 바꾸면 제가 원하는 차트가 그려지지 않을까 해서 가독성을 위해 위쪽 코드만 이렇게 올렸습니당..

사실 전체 코드는 이렇습니다.

import React from "react";
import {
  Label,
  LineChart,
  Line,
  CartesianGrid,
  XAxis,
  YAxis,
  Tooltip,
  ReferenceArea
} from "recharts";

const data = [
  { name: 1, cost: 4.11, impression: 100 },
  .....//생략
];

const getAxisYDomain = (from, to, ref, offset) => {
  const refData = data.slice(from - 1, to);
  let [bottom, top] = [refData[0][ref], refData[0][ref]];
  refData.forEach(d => {
    if (d[ref] > top) top = d[ref];
    if (d[ref] < bottom) bottom = d[ref];
  });

  return [(bottom | 0) - offset, (top | 0) + offset];
};

const initialState = {
  data,
  left: "dataMin",
  right: "dataMax",
  refAreaLeft: "",
  refAreaRight: "",
  top: "dataMax+1",
  bottom: "dataMin-1",
  top2: "dataMax+20",
  bottom2: "dataMin-20",
  animation: true
};

<strong>export default class StreamingDemo extends React.Component</strong> {
  constructor(props) {
    super(props);
    this.state = initialState;
  }

  zoom() {
    let { refAreaLeft, refAreaRight, data } = this.state;

    if (refAreaLeft === refAreaRight || refAreaRight === "") {
      this.setState(() => ({
        refAreaLeft: "",
        refAreaRight: ""
      }));
      return;
    }

    // xAxis domain
    if (refAreaLeft > refAreaRight)
      [refAreaLeft, refAreaRight] = [refAreaRight, refAreaLeft];

    // yAxis domain
    const [bottom, top] = getAxisYDomain(refAreaLeft, refAreaRight, "cost", 1);
    const [bottom2, top2] = getAxisYDomain(
      refAreaLeft,
      refAreaRight,
      "impression",
      50
    );

    this.setState(() => ({
      refAreaLeft: "",
      refAreaRight: "",
      data: data.slice(),
      left: refAreaLeft,
      right: refAreaRight,
      bottom,
      top,
      bottom2,
      top2
    }));
  }

  zoomOut() {
    this.setState(({ data }) => ({
      data: data.slice(),
      refAreaLeft: "",
      refAreaRight: "",
      left: "dataMin",
      right: "dataMax",
      top: "dataMax+1",
      top2: "dataMax+50",
      bottom: "dataMin"
    }));
  }

  render() {
    const {
      data,
      left,
      right,
      refAreaLeft,
      refAreaRight,
      top,
      bottom,
      top2,
      bottom2
    } = this.state;

    return (
      <div className="highlight-bar-charts">
        <button className="btn update" onClick={this.zoomOut.bind(this)}>
          Zoom Out
</button>

        <p>Highlight / Zoom - able Line Chart</p>
        <LineChart
          width={800}
          height={400}
          data={data}
          onMouseDown={e => this.setState({ refAreaLeft: e.activeLabel })}
          onMouseMove={e =>
            this.state.refAreaLeft &&
            this.setState({ refAreaRight: e.activeLabel })
          }
          onMouseUp={this.zoom.bind(this)}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis
            allowDataOverflow={true}
            dataKey="name"
            domain={[left, right]}
            type="number"
          />
          <YAxis
            allowDataOverflow={true}
            domain={[bottom, top]}
            type="number"
            yAxisId="1"
          />
          <YAxis
            orientation="right"
            allowDataOverflow={true}
            domain={[bottom2, top2]}
            type="number"
            yAxisId="2"
          />
          <Tooltip />
          <Line
            yAxisId="1"
            type="natural"
            dataKey="cost"
            stroke="#8884d8"
            animationDuration={300}
          />
          <Line
            yAxisId="2"
            type="natural"
            dataKey="impression"
            stroke="#82ca9d"
            animationDuration={300}
          />

          {refAreaLeft && refAreaRight ? (
            <ReferenceArea
              yAxisId="1"
              x1={refAreaLeft}
              x2={refAreaRight}
              strokeOpacity={0.3}
            />
          ) : null}
        </LineChart>
      </div>
    );
  }
}

그래서 만약 제가 initialData를 클래스 안으로 가지고 들어오게되면

const getAxisYDomain 함수랑 const initialState도 안으로 가지고 들어와야할 것 같은데

그러면 복잡해지지 않을까해서 질문드린거였습니다..

할 수 있다면 클래스 안에서 하는게 저도 더 좋은것 같스빈다. (window로 전역변수 쓰는게 너무 안 좋은 아이디어인것 같습니다.)

export default class Example extends PureComponent {

constructor(props) {
super(props);
const initialData = this.props.chartdata;
const initialState = {
data: this.initialData,
left: 'dataMin',
right: 'dataMax',
refAreaLeft: '',
refAreaRight: '',
top: 'dataMax+1',
bottom: 'dataMin-1',
top2: 'dataMax+20',
bottom2: 'dataMin-20',
animation: true,
};

this.state = initialState;
}
....

말씀하신대로 변수를 class안으로 옮겨서, 다음과 같이 코드를 짜서 props로 넘어온 chartdata를 사용하고자하는데요

console.log(this.props.chartdata)하면 배열 원소들이 깔끔하게 찍힙니다.

그런데 위 코드처럼 작성했을 경우

console로 initialState랑 initialData를 찍으면 undefined가 뜹니다!

이건 또 어떻게 해야할까요;;