Index

1. mock data란? mock data가 필요한 이유
2. mock data 관리하는 두 가지 방법
   2-1. data.js
   2-2. data.json

1. mock data

1-1. mock data란?

• mock: 거짓된, 가짜의
• 이름에서 알 수 있듯이 mock data, 혹은 mock-up data란 가짜 데이터, 혹은 샘플 데이터 정도로 해석할 수 있습니다. 즉, 실제 API에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터를 말합니다.

1-2. mock data가 필요한 이유

• UI 구성, map 함수 사용
• API가 아직 준비 안 된 경우
• 프로젝트 진행 시 많은 경우 API가 나오기 이전에 페이지 레이아웃이 먼저 나오는 경우가 많습니다. 이러한 경우에는 백엔드에서 API가 나올 때까지 무작정 기다리는 게 아니라, mock data를 만들어 데이터가 들어오는 상황을 미리 예상하고 들어올 경우에 UI가 계획대로 잘 나오는지 확인해야 합니다.
• 실제 예시는 아래에서 살펴보도록 하겠습니다.

2. mock data 관리하는 두 가지 방법

• mock data를 만들어 관리하고 사용하는 방법에는 두 가지가 있습니다.
• 첫 째는 js 파일에 데이터를 담아 그것을 import해서 사용하는 경우,
• 두 번째는 실제 API에서 보내주는 데이터 형식에 맞게 json 파일에 데이터를 담아 fetch 함수를 사용해 데이터를 받아오는 방법
• 우선 첫 번째 방법부터 살펴보도록 하겠습니다.

2-1. data.js

2-1-1. data.js 위치

• 해당 컴포넌트 바로 옆에 만들어서, 바로 접근하기 쉽게.

2-1-2. 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;

2-1-3. App.js

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

2-2. data.json

2-2-1. data.json 위치

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

2-2-2. data.json

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

2-2-3. 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

Assignment