[React] Mock Data

📓Mock Data

📙 Mock Data란?

UI 구성에 필요한 백엔드 API가 완성되기 전에 프론트엔드는 데이터가 들어오는 상황에 대비해 의도한대로 UI가 구현되는지 확인을 해야한다. 이때 사용되는 데이터가 Mock Data이다.
즉, 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터이다.

📙Mock Data를 사용하는 이유

백엔드 API가 미완성인 상황에서 Mock Data를 사용하지 않는다면, 대부분은 실제 데이터가 들어올 부분들을 하드코딩으로 대체하고 작업을 하게 된다. 그렇게 개발을 진행한다면 여러 문제가 발생할 수 있다.

우선 개발이 진행됨에 따라 코드가 확장된 상태이기 때문에, 백엔드 API가 완성되고 실제 데이터를 반영하는 작업을 수행할 때 번거로울 수 있다.
또한, 실제 데이터에서는 존재하지 않는 값을 토대로 UI를 그렸거나, 반대로 실제 데이터를 기반으로 작업해야 하는 내용이 누락되었을 수도 있다.

Mock Data를 사용하면 위와 같은 문제를 해결할 수 있다.

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

📙Mock Data 생성

🖍형태

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

JSON이란 Java Script Object Notation의 줄임말로, 단어 기준 그대로 자바스크립트를 객체로 표현한 것이다.
key : value 의 객체 형태이고, 백엔드와의 데이터 통신을 위해 사용하는 형식이다.

마켓컬리 데이터로 예를 들면 이런식으로 사용할 수 있다.

// public/data/productData.json

{
  "id": 3,
  "image_url": "https://img-cf.kurly.com/shop/data/goods/1648203571907l0.jpg",
  "name": "[콜린스그린] 더 오렌지 1000mL",
  "short_description": "물 한방울 넣지 않고 순수한 오렌지 과육을 짜낸 100% 착즙 오렌지 주스",
  "discounted_price": 14080,
  "discount_rate": 20,
  "original_price": 17600,
  "unit_text": "1병",
  "weight": "1000ml",
  "delivery_type": [
    { "id": 0, "text": "샛별배송" },
    { "id": 1, "text": "택배배송" }
  ],
...
}

Mock Data는 서버에서 받아올 데이터의 모조 데이터인 만큼 프론트엔드 개발자가 로컬 서버에서 Mock Data를 받아오도록 구현해야 하기 때문에 .json 파일로 생성해야 한다.

🖍위치

Mock Data는 로컬 서버에서 받아오도록 구현해야 하기 때문에 파일의 위치는 npm start시 로컬 서버에 올라가는 폴더인 public 폴더 하위에서 관리해야 한다. public 폴더 하위에 data 폴더 생성 후 해당 폴더에서 Mock Data를 관리한다.

📙Mock Data 사용

🖍호출

Mock Data는 실제 데이터와 동일하게 fetch 메서드에서 호출한다.
fetch 메서드의 첫 번째 인자로 http 요청을 보낼 API 주소를 받는데, 여기에 생성한 Mock Data의 주소를 입력한다. http://localhost:3000은 생략 가능하며 생략 안하고 사용 시, 로컬 서버가 여러개 열려있다면 새로운 로컬 서버를 실행할 때마다 포트번호가 바뀌게 되어 일일이 수정을 해야한다.

fetch('/data/recommendData.json', {
  method: 'GET'
})

두 번째 인자는 요청을 보낼 때의 옵션 객체를 전달하는 부분이다. 위의 코드인 경우 서버로부터 데이터를 받아오는 GET 요청이기 때문에 method옵션에 명시해주었다. (대부분의 경우 method가 GET일 때 생략 가능)

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

이후 JSON 형태의 response 데이터를 자바스크립트 객체 형태로 바꿔준 다음, 받아온 데이터를 화면에 그려주기 위해 productList state를 업데이트 해준다.

🖍호출시점

fetch 메서드를 통해 Mock Data를 받아오는 시점은 실제로 데이터를 불러오는 시점이 언제인지에 따라 다르다. 버튼을 클릭했을 때 받아와야 하는 경우도 있고, 페이지를 불러올 때 바로 화면에 그려줘야 하는 경우도 있ㄷ.

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

위의 코드는 페이지를 불러올 때 바로 화면을 그려줘야한다. 그러므로 useEffect hook을 통해 컴포넌트가 마운트 된 후 한번만 데이터를 받아오도록 한다.

fetch method는 반드시 useEffect와 함께 사용해야만 하는 것은 아니다.