[React]mock 데이터 이용해서 테스트하기

백엔드와 프론트의 작업속도가 달라서 보통 프론트엔드가 UI를 그리면서 개발에 들어갔을 때에는 백엔드 api가 만들어지기 전일 가능성이 있다.
그렇다면 프론트에서는 데이터없이 상상으로 개발을 한다?
는 아니다
우리는 백엔드 api가 없어도 백엔드가 있는 것처럼
목데이터라는걸 이용해서 테스트를 해볼 수 있다.

mockdata

사전적 의미로 '가짜의'라는 뜻을 지녔고, 개발에서는 샘플데이터라고 볼 수 있다.
이 목데이터는 실제로 백엔드 API의 응답 형태인 JSON파일로 만들어줘야 한다.

JSON예제

[
  {
    "id": 1,
    "type": "zzangGu",
    "name": "짱구",
    "image": "https://img.lovepik.com/element/40025/8744.png_860.png"
  },
  {
    "id": 2,
    "type": "zzangGu",
    "name": "짱구",
    "image": "https://img.lovepik.com/free-png/20211227/lovepik-cosmetics-png-image_400665125_wh860.png"
  },
  {
    "id": 3,
    "type": "zzangGu",
    "name": "짱구",
    "image": "https://w7.pngwing.com/pngs/837/521/png-transparent-lotion-skin-care-moisturizer-cosmetics-others-miscellaneous-cream-cosmetics.png"
  },
  {
    "id": 4,
    "type": "zzangGu",
    "name": "짱구",
    "image": "https://w7.pngwing.com/pngs/352/335/png-transparent-sephora-cosmetics-cream-stylenanda-foundation-3ce-cream-face-cosmetics.png"
  },
  {
    "id": 5,
    "type": "zzangGu",
    "name": "짱구",
    "image": "data:image/jpeg"
  },
  {
    "id": 6,
    "type": "zzangGu",
    "name": "짱구",
    "image": "https://png.pngtree.com/element_our/20190524/ourmid/pngtree-red-hand-drawn-cosmetic-png-element-image_1094355.jpg"
  },
  {
    "id": 7,
    "type": "chulSu",
    "name": "철수",
    "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2_yRt_8k4QhurjUd9zVTHAQo7kbBpB--x-g&usqp=CAU"
  },
  {
    "id": 8,
    "type": "chulSu",
    "name": "철수",
    "image": "https://w7.pngwing.com/pngs/264/463/png-transparent-foundation-cosmetics-skin-care-cream-liquid-foundation-cream-face-cosmetics.png"
  },
  {
    "id": 9,
    "type": "hoonE",
    "name": "훈이",
    "image": "https://m.gilla8.com/web/product/big/202104/478c7af06e13b75764fba032c0b47922.png"
  },
  {
    "id": 10,
    "type": "hoonE",
    "name": "훈이",
    "image": "https://m.cremorlab.co.kr/web/product/big/202009/3b881aeb4f903ce1afded0b6ca227c2a.jpg"
  },
  {
    "id": 11,
    "type": "hoonE",
    "name": "훈이",
    "image": "https://cdn.imweb.me/thumbnail/20200528/7905e43f9735a.jpg"
  },
  {
    "id": 12,
    "type": "youRi",
    "name": "유리",
    "image": "http://holtzforman.com/shopimages/holtzforma/0010000000102.jpg"
  },
  {
    "id": 13,
    "type": "youRi",
    "name": "유리",
    "image": "http://www.annaholtz.com/shopimages/eskinb2b/3220160000102.jpg?1544417516"
  }
]

• key,value 쌍을 여러개 가진 Object 형태를 감싼 Array형태이다.
• JSON Object({}로 감쌈)안에 JSON Array([]로 감쌈)를 가질수도 있고 반대일 수도 있다.

json파일 fetch()해서 테스트하기

• 우리는 백엔드 api를 연결할 때 fetch를 사용해서 호출한다.
  비슷하게 public폴더에 json파일을 호출해보자.

코드 예제

import { useState, useEffect } from 'react';
import Card from './Testcard';

function Test() {
  const [list, setList] = useState([]);

  // Public 폴더에 data폴더에있는 json파일 호출
  useEffect(() => {
    fetch('data/mockData.json')
      .then(res => res.json())  // javascript객체로 변환
      .then(setList);           // list에 저장
  }, []);

  return <Card list={list} />;

• fetch로 받아온 json파일은 바로 사용할 수 없다.
• 클라이언트에서 사용하는 언어가 javascript기 때문에 js객체로 변환해야 쓸 수 있다.
• js객체로 변환된 json파일은 list에 저장해서 필요해따라 props로 넘겨주든 key로 접근에 변수에 할당에서 사용하든 사용하면 된다.