Mock data란??

mock은 거짓된, 가짜의 의미로 mock data는 가짜 데이터, 샘플 데이터로 해석할 수 있다.
실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해서 샘플로 만들어 본 데이터를 말한다.

mock data가 필요한 이유가 뭘까??

API가 아직 준비중인 경우

주로 프로직트를 진행할 때 API가 나오기 전에 먼저 페이지 레이아웃이 나오는 경우가 일반적이다.
따라서 백엔드에서 API가 나올때까지 기다리는 것이 아니라, mock data를 만들어 데이터가 들어오는 상황을 대비하고 UI가 올바르게 작동이 되는지 먼저 확인해야 한다.

백엔드와 더욱 효율적인 소통을 위해

주고 받은 데이터 형태가 어떤 타입인지, key와 value를 미리 맞춰볼 수가 있다.

mock data 관리하는 2가지 방법

첫번째 방법

첫번째 방법은 .js 파일로 데이터를 분리하는 방법이다.
배열 데이터를 변수에 담고 필요한 컴포넌트에서 import 해서 사용한다.
.js 파일은 데이터를 import 하는 컴포넌트 바로 옆으로 접근하기 쉬운 곳에 생성한다.

두번째 방법

두번째 방법은 실제 API 에서 보내주는 데이터 형식에 맞게 json 파일에 데이터를 담아 fetch 함수를 사용해 데이터를 받아오는 방법이다.