1. Mock Data 란

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

2. Mock Data 를 사용하는 이유

• 프로젝트를 진행하다 보면 많은 경우에 API 가 나오기 전에 페이지가 먼저 만들어진다. 따라서 프론트에서 기능 구현을 위해 데이터가 필요하다면 Mock Data 를 만들어 쓸 수 있다.
• Mock Data 를 잘 만들어 두면, 프론트에서 필요한 데이터의 구조가 구체화되기 때문에 나중에 백과의 소통이 원활해질 수 있다는 장점이 있다.

3. Mock Data 를 관리하는 두 가지 방법

3-1. Data.js

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

3-2. Data.json

• 위치 : public > data > 데이터가 사용되는 컴포넌트를 폴더명으로 한다 > 컴포넌트.json
• 언제 사용할까? : 추후에 API 가 완성되면 대체될 데이터를 저장할 때 사용하면 좋을 듯 하다.
• json 파일 내용 예시

{
  "data": [
    {
      "id": 1,
      "name": "yang",
      "age": 30
    },
    {
      "id": 2,
      "name": "kim",
      "age": 29
    }
  ]
}

• json 파일을 import 해서 사용할 때 예시

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

느낀 점

프로젝트를 진행하면서 초반에는 페이지를 만드느라 정신이 없어서 mock data 를 쓰지 않고 필요한 데이터를 모두 하드코딩했다. 후에 컴포넌트를 만들 일이 있어서 mock data 사용법을 알게 되어서 사용했다. 조금 더 일찍 적용했으면 백엔드랑 소통할 때 좀 더 명확하게 할 수 있었을 것 같다.