MocData map으로 돌리는 법

MockData.json 파일 만드는 법

{
  "feeds": [
      {
          "id": 1,
          "clientName": "김민수",
          "clientNumber": 1095223513,
          "type": "초진",
          "date": "2022-10-17",
          "startTime": "4:30",
          "reservationStatus": "예약"
      },
      {
          "id": 2,
          "clientName": "최사비",
          "clientNumber": 84560801,
          "type": "재진",
          "date": "2022-10-16",
          "startTime": "3:30",
          "reservationStatus": "노쇼"
      }
      	]
 }

Db data map으로 불러오기

import React, { useEffect, useState } from 'react';
import db from './db.json';

export const Db = () => {
  const [productList, setProductList] = useState([]);
   useEffect(() => {
  setProductList(db)
  }, []);
 
  console.log(productList.feeds);
  
  return (
    <div>
      {
        productList.feeds?.map((item) => 
        console.log('data: ', item)
      )}
    </div>
  );
};

useState([]) 안에 각 가로를 꼭 넣어서 초기화 해야 한다!!!.

JSON 파일은 array 이기 때문에 [ ] 되게 해야 하기 때문에 [ ] 의 이름인 feeds를 불러냈고 feeds? 를 쓰는 것은 랜더링시 true 일 경우 map을 실행하기 위함이다.