mock data는 가짜 데이터라는 뜻이다
프로젝트를 하다보면 벡엔드에서 데이터를 넘겨주기 전에 기능이 잘 실현되는지 확인해보기 위해 맛보기(?)데이터를 프론트에서 만들어쓴다고 생각하면 된다

mock data 만드는 두가지 방법

data.js

.js 파일에 데이터를 만들어 import해서 사용하는 방법

//data.js파일
const data=[
  {
    id:1,
  	fruit:"banana"
  },
   {
    id:2,
  	fruit:"apple"
  },
   {
    id:3,
  	fruit:"grape"
  }
]
export default from "data.js"

//App.js파일(데이터가 필요한 파일)
import data from "data.js"

data.json

.json으로 파일을 만들어 url을 가지고 fetch함수로 데이터를 가져오는 방법
public폴더->data폴더->data.json

//data.json파일
{
"data":[
  {
    id:1,
  	fruit:"banana"
  },
   {
    id:2,
  	fruit:"apple"
  },
   {
    id:3,
  	fruit:"grape"
  }
 ]
}

//App.js파일(데이터가 필요한 파일)
import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState([]);

  //mock데이터 들고오기
  useEffect(() => {
    fetch("http://localhost:3000/data/mockData.json")
      .then(res => res.json())
      .then(json => setData(json.data));
  }, []);
}