Mock Data

• Mock Data 란, 말 그대로 "가짜 데이터" 를 의미한다.
  API 를 통해 백에서 받아온 데이터가 아니라 프론트엔드에서 필요에 의해 임의로 만든 샘플 데이터이다.

Mock Data 를 사용하는 이유는 ?

• 프로젝트를 진행하다 보면 많은 경우에 API 가 나오기 전에 페이지가 먼저 만들어진다. 따라서 프론트에서 기능 구현을 위해 데이터가 필요하다면
  Mock Data 를 만들어 쓸 수 있다.

• Mock Data 를 잘 만들어 두면, 프론트에서 필요한 데이터의 구조가 구체화되기 때문에 나중에 백과의 소통이 원활해질 수 있다는 장점이 있다.

Mock Data 관리하는 2가지 방법

• 첫 째는 js 파일에 데이터를 담아 그것을 import해서 사용 할 경우
• 두 번째는 실제 API에서 보내주는 데이터 형식에 맞게 json 파일에 데이터를 담아
  fetch 함수를 사용해 데이터를 받아오는 방법

1)Data.js

위치 : 해당 컴포넌트 바로 옆에 만들어서 접근하기 쉽도록 한다.
사용 : 정적인 데이터를 저장할 때 사용하면 좋을 듯 하다.

const Data = [
  {
    id: 1,
    skills: "HTML"
  },
  {
    id: 2,
    skills: "CSS"
  },
  {
    id: 3,
    skills: "JavaScript"
  },
  {
    id: 4,
    skills: "React"
  },
 ]
 
export default Data;

2)Data.json

위치 : public > data > 데이터가 사용되는 컴포넌트를 폴더명으로 한다.
사용 : 추후 API가 완성되면 대체될 데이터를 저장할 때 사용하면 좋을거 같다.

{
  "data": [
    {
      "id": 1,
      "name": "jeong",
      "age": 20
    },
    {
      "id": 2,
      "name": "hyun",
      "age": 25
    }
  ]
}

import React, { Component } from 'react'

export class Main extends Component {
  constructor(){
    super();
    this.state = {
      data: []
    };
  }

  componentDidMount = () => {
    fetch('http://localhost:3002/data/data.json')
      .then(res => res.json())
      .then(res => {
        console.log("firstly: ", res.data)
        this.setState({
          data: res.data
        }, () => {
          console.log("secondly: ", this.state.data)
        })
  })
}

  render() {
    console.log("thirdly: " , this.state.data)
    return (
      <div>
        hello
      </div>
    )
  }
}

export default Main