Mock Data란?

백엔드 API인 것 처럼 흉내내는 데이터이다
백엔드 API가 완성되지 않은 상황에서 API가 완성될 상황에 대비해 의도한대로 UI를 그릴때 도움을 준다
*Mock : 흉내내다

Mock Data를 사용하는 이유

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

Mock Data 사용

먼저 API를 흉내낸 데이터이기 때문에 API 구조부터 알아야 한다(백엔드 개발자와 소통)

1. API의 key-value 확인

2. 확인된 key-value 형태로 json 파일로 Mock Data 생성

3. 생성된 Mock Data 관리 public > data폴더에서 관리 (로컬서버에서 통신으로 응답받아 구현하기 때문에 public 폴더에서 관리)

4. 실제 API 호출메서드인 fetch를 이용해 호출할 수 있다

   fetch("/data/파일명.json")
.then(response => response.json())
.then(result => setState(result))

   첫번째 then 메서드에 인자로 callBack을 전달하고 매개변수 response에 JSON 형태의 데이터가 들어온다 body에 .json()메서드가 JSON형태를 자바스크립트 형태로 변환하고, 반환해 준다

   두번째 then 메서드는 인자로 callBack을 전달하고 매개변수에는 첫번째 then메서드에서 반환된 객체를 result로 받아 setState 함수로 result를 state에 저장한다

   state에 저장된 Mock Data를 언제든 꺼내 쓸 수 있게 됐다

5. fetch 메서드 호출 타이밍 : 데이터를 호출 하는 시점은 각각 다르므로 타이밍을 지정해 주어야한다

• 컴포넌트가 브라우저에 그려지고 호출해야하는 상황 : useEffect안에서 fetch메서드 호출
• 특정 이벤트 함수가 실행될때 호출해야하는 상황 : 특정이벤트 함수 내에서 fetch메서드 호출