Mock Data

1-1. Mock Data가 뭘까?

백엔드 API가 완성되지 않은 상황에서 프론트엔드 개발을 진행할 때, UI 구현 상황을 확인하기 위해 사용하는 데이터, '모조 데이터'다.

다시 말해, Mock Data는 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터!

1-2. Mock Data를 사용하는 이유?

백엔드 API 없이 하드코딩으로 프론트엔드 개발을 진행한다면 백엔드 API 완성 후 실제 반영 시에 수정 사항이 많아져서.. 시간을 그만큼... 그래서 미리 mock data를 만들어 사용하면 시간 절약에 도움이 된다.

[정리하자면...]

• 백엔드 API가 미완성인 상태에서도 차질 없이 개발 가능
• 백엔드 API 구성을 미리 맞춰볼 수 있음
• 실제 API 통신할 때 원활하게 진행 가능

---

2-1. Mock Data 사용법

- 형태

실제 서버에서 보내주는 데이터의 형식과 동일하게 만들어야 하기 때문에 .json 확장자 파일로 JSON 형식의 데이터를 생성해준다.

public 폴더 안에 .json 형식

실제 데이터의 형태에 맞게 가짜 데이터를 구성하는데, 백엔드 개발자와 소통해 key-value 값을 맞춰두면 실제 API 통신 때 진행이 빠르다!

- 호출

Mock Data는 실제 데이터처럼 fetch 메서드에서 호출한다. 보통은 useEffect로 묶어주는데, 특정 이벤트 실행시에 불러오도록 할 수도 있다.

먼저 불러올 API 주소를 지정해주고, method로 'GET'인지 'POST'인지 'DELETE'인지 알려준다. 이후 JSON 형태의 response 데이터를 orderItems state에 업데이트 해준다.

fetch('/data/OrderItem.json', {
  method: 'GET'
})
  .then(res => res.json())
  .then(setOrderItems);
}, []);