목데이터 사용하는 법

백엔드 api가 없어도 백엔드가 있는것처럼 데이터를 받아오자

// 목데이터의 위치 // cra폴더구조의 public하단에 폴더생성후 적용
public/data/mockdata.json

// mockdata.json // 목데이터는 객체형(json)
{
  "data": [
    {
      "back": "https://www.osulloc.com/upload/kr/ko/item_overImg/5041.png?quality=80&shrink=304:340",
      "front": "https://www.osulloc.com/upload/kr/ko/adminImage/PW/US/200_20180406140800938CQ.png?quality=80",
      "best": true,
      "gift": true,
      "name": "녹차밀크스프레드 200 g",
      "price": "8,500",
      "likes": 18,
      "comments": 556
    },
      ]
}

// 목데이터를 받아사용해볼 fetch
class Test extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
    };
  }

  componentDidMount = () => {
    fetch(url + "/data/TeaItem.json", {})
      .then((response) => response.json())
      .then((response) => {
        this.setState({ data: response.data });
      });
  };

get요청을 해서 백엔더 api에서 데이터를 받듯이 내 로컬 목데이터 저장주소로 데이터를 요청하고 받는것이다.

이것은 local 또한 하나의 서버로 하여 보내고 받는 것이다.