Mock Data 🐾

1. mock data

1. mock data란?

• mock: 거짓된, 가짜의
• 이름에서 알 수 있듯이 mock data 는 가짜 데이터, 샘플 데이터
• 즉, 실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플용으로 만든 데이터

2. mock data가 필요한 이유

• API 가 아직 준비중인 경우

  :: 프로젝트 진행 시 API가 나오기 이전에 페이지 레이아웃이 먼저 나오는 경우가 많다. 이러한 경우에는 백엔드에서 API가 나올 때까지 무작정 기다리는 게 아니라, mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고 UI가 기획에 맞게 구현되는지 먼저 확인해야 한다.

• Backend 와의 원활한 의사소통을 위함

  :: 주고 받는 데이터가 어떤 형태인지, key-value 값을 미리 맞춰볼 수 있다.

2. mock data 관리 방법

data.js & data.json

📂 data.js

🧷 data.js 위치
해당 컴포넌트 바로 옆에 만들어서, 바로 접근하기 쉽게!

const SlickData = [
  {
    id: 1,
    skills: "HTML"
  },
  {
    id: 2,
    skills: "CSS"
  },
  {
    id: 3,
    skills: "JavaScript"
  },
  {
    id: 4,
    skills: "React"
  },
  {
    id: 5,
    skills: "React Native"
  },
  {
    id: 6,
    skills: "Angular"
  },
  {
    id: 7,
    skills: "Vue"
  },
  {
    id: 8,
    skills: "Redux"
  },
  {
    id: 9,
    skills: "TypeScript"
  }
];

export default SlickData;

🧷 app.js

import React from 'react';
import DATA from 'data.js';

📂 data.json

🧷 data.json 위치

• public 폴더 > data 폴더 > data.json

🧷 data.json

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

🧷 app.js

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