임시로 만들어 놓은 데이터인 DummyData를 화면에 출력할 수 있게 컴포넌트를 수정해봅시다.

컴포넌트를 수정하기에 앞서 더미데이터를 먼저 만들어줍시다. 경로는 src/lib/dummyData.js 입니다. 아래와 같이 작성해주세요.

• src/lib/dummyData.js

export const dummyData = {
  "0": {
    id: "0",
    name: "John",
    phone: "010-0000-0000"
  },
  "1": {
    id: "1",
    name: "Peter",
    phone: "010-1111-1111"
  },
  "2": {
    id: "2",
    name: "Elise",
    phone: "010-2222-2222"
  },
  "3": {
    id: "3",
    name: "Chris",
    phone: "010-3333-3333"
  },
  "4": {
    id: "4",
    name: "Austin",
    phone: "010-4444-4444"
  }
};

위와 같은 형식이라면 dummyData의 데이터 타입은 JSON이 아니라 배열이어도 상관없지만, JSON을 업데이트 할 때의 속도가 배열을 업데이트 할때의 속도보다 훨씬 빠릅니다. 따라서 여기에서는 JSON 형식으로 데이터를 만들겠습니다. 다음으로 해줘야 할 것은 App.js에서 더미데이터를 불러온 후에 state 를 정의하는 것입니다. 아래와 같이 App 컴포넌트를 수정해주세요.

• src/App.js

import React, { Component } from "react";
import InputBox from "./components/InputBox";
import PhoneList from "./components/PhoneList";
import "./App.css";
import { dummyData } from "./lib/dummyData.js";

class App extends Component {
  state = dummyData;

  render() {
    return (
      <div className="container">
        <InputBox />
        <PhoneList />
      </div>
    );
  }
}

export default App;

기존의 App 컴포넌트는 함수형 컴포넌트였지만 state를 사용하기 위해 클래스 컴포넌트로 바꿔주었습니다. 위와 같이 더미데이터를 불러오고 state를 선언해주세요. 다음으로 PhoneList 컴포넌트에 state 값을 list라는 이름의 props로 넘겨주겠습니다. 컴포넌트를 다시 아래와 같이 수정해주세요.

• src/App.js

class App extends Component {
  state = dummyData;

  render() {
    return (
      <div className="container">
        <InputBox />
        <PhoneList list={this.state} />
      </div>
    );
  }
}

App 컴포넌트에서 PhoneList 컴포넌트에게 list라는 이름의 props를 전달해주었습니다. 그럼 PhoneList 컴포넌트에서 데이터를 받아봅시다.