React/ part.3 Mock Data

Mock Data

이번 글에서는  이전 글인 상수데이터에 이어 Mock Data에 대한 개념과 활용방법에 대해 다룹니다.

또한 fetch 메서드를 사용해 로컬 서버에서 Mock data를 받아와 활용하는 방법에 대한 내용이 있습니다.

 

---

1. Mock Data란?

실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터이다.

UI 구성에 필요한 백엔드 API가 완성되지 않은 상황에서 개발을 진행해야 할 때,

데이터가 들어오는 상황에 대비해 의도한 대로 UI가 구현되는지 확인하기 위해 사용한다.

⇒ Mock data를 fetch를 사용해 실제로 서버에서 받아오는 것처럼 사용한다.

 

 

2. Mock Data를 사용하는 이유

 

백엔드 API가 미완성인 경우 Mock Data를 사용하지 않으면,

실제 데이터가 들어올 부분들을 하드코딩으로 대체해 작업을 진행해야한다.

⇒ 비효율적이고 실제 백엔드 API를 적용할 때 여러 어려움이 발생할 수 있다.

 

Mock Data를 사용할 경우

백엔드 API가 미완성인 상태에서도 작업에 차질 없이 개발 가능하다.

백엔드 API의 구성을 미리 맞춰볼 수 있다.

실제로 API 통신을 진행할 때 원활하게 할 수 있다.

 

간략하게 정리하는 Mock Data 활용 방법

백엔드 개발자와 커뮤니케이션 & API의 Key-value 확인 ⇒

확인 된 Key-value대로 json 파일에 Mock Data 생성 ⇒

생성된 Mock Data 관리 ⇒

Mock Data Fetch 메서드 호출

 

3. Mock Data 생성

 

Mock Data 형태

Mock Data는 실제 서버에서 보내주는 데이터의 형식과 동일하게 만들어야 하기 때문에

 .json 확장자 파일로 JSON형식의 데이터를 생성한다.

실제로 들어올 데이터의 형태에 맞게 객체 혹은 배열 안에 가짜 데이터를 구성

백엔드 개발자와 소통해 key-value 값을 동일하게 맞추어

추후 실제로 API 통신을 원활하게 진행할 수 있도록 한다.

 

Mock Data 생성 위치

Mock Data는 로컬 서버에서 받아오도록 구현

npm start 시 로컬 서버에 올라가는 폴더인 public 폴더 하위 에서 관리

public 폴더 하위에 data 폴더를 생성한 후 해당 폴더에서 Mock Data를 관리

(public은 상대경로 접근이 안된다.)

 

4. Mock Data 사용

 

1. Mock Data 호출

요청과 응답

fetch('/data/recommendData.json', { // 1.
  method: 'GET' // 2.
})
  .then(res => res.json()) // 3.
  .then(result=> { // 4. 
    setProductList(result);
  });

 

1.

Mock Data는 실제 데이터와 동일하게 fetch 메서드에서 호출한다.

fetch 메서드의 첫 번째 인자로 http 요청을 보낼 API 주소를 받는다.

API 주소에 생성한 Mock Data의 주소를 입력한다.

 

2.

두 번째 인자는 요청을 보낼 때의 옵션 객체를 전달하는 부분이다.

서버로부터 데이터를 받아오는 GET요청이기 때문에 method 옵션에 GET이라고 명시한다.

(method가 GET인 경우 생략 가능)

 

3.

첫번째 .then 에서는 JSON 형태의 response(매개 변수) 데이터를

자바스크립트 객체 형태로 바꾼다.

 

4.

두번째 .then 에서는 인자로 callback을 전달해서 매개변수로

첫번째 .then에서 반환된 객체를 result로 받아

setState함수로 state에 저장한다.

 

 

 

2. fetch 호출 시점

fetch 메서드를 통해 Mock Data를 받아오는 시점은

실제로 데이터를 불러오는 시점이 언제인지에 따라 다르다.

조건 없이 바로 실행 또는 특정 이벤트 실행 시 발생 등

 

특정 이벤트 발생시에만 동작하도록 하는 것 (특정 호출 시점)

⇒ useEffect 의존성 배열 사용이 중요

 

(fetch와 useEffect를 꼭 함께 사용해야 하는 것은 아니다.)

 

 

---

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!