Mock Data

mock data 란?

• 가짜 데이터, 샘플 데이터로 해석 될수 있다.
• 백엔드 API가 완성되기전에 프론트엔드 개발을 진행하기위해 백엔드 response의 형태에 맞게
  임시로 만드는 데이터
• 실제 백엔드 API의 응답값의 형태인 json파일로 만들어준다.
• public 폴더에 안에 폴더를 만들어서 저장
  • 실제로 웹을 배포할때 public 폴더가 배포되는 것이다.

사용 예시

mock data 만들기

• coffeeData.json

[
    {
      "id" : 1,
      "image": "/images/mingi/콜드 브루.jpg",
      "explain": "콜드 브루"
    },
    {
      "id" : 2,
      "image": "/images/mingi/돌체 콜드 브루.jpg",
      "explain": "돌체 콜드 브루"
    },
    {
      "id" : 3,
      "image": "/images/mingi/바닐라 크림 콜드 브루.jpg",
      "explain": "바닐라 크림 콜드 브루"
    },
    {
      "id" : 4,
      "image": "/images/mingi/제주 비자림 콜드 브루.jpg",
      "explain": "제주 비자림 콜드 브루"
    }
]

mock data 호출

import React, { useState, useEffect } from 'react';
import CoffeeCard from './CoffeeCard/CoffeeCard';
import './List.scss';

function List() {
  const [coffeeList, setCoffeeList] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/data/coffeeData.json', {
      method: 'GET' // GET method는 기본값이라서 생략이 가능합니다. 
    })              
      .then(res => res.json())
      .then(data => {
        setCoffeeList(data);
      });
  },[])

  return (
    <div className="List">
      <h1>Main Page</h1>
      <ul>
        {coffeeList.map(coffee => {
          return (
            <CoffeeCard
              key={coffee.id}
              imageSrc={coffee.image}
              comment={coffee.explain}
            />
          );
        })}
      </ul>
    </div>
  );
}

export default List;

1. 우선 불러올 데이터 값을 state 값을 관리하기 위해 useState로 빈배열을 만들어준다.
2. useEffect 함수를 이용해서 컴포넌트가 렌더링이 된 이후에 데이터를 요청한다.
3. fetch 함수로 인해서 coffeeList state값이 업데이트 되고 다시 렌더링 되면서
   List 컴포넌트안에 map 함수가 사용될수 있는 조건이 되어서 CoffeeCard 컴포넌트가 생성된다.