1. mock data?

실제 API 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 만들어 본 샘플 데이터를 말합니다

mock data를 사용하는 이유

• 프론트엔드 개발을 진행하려는데 필요한 백엔드 API가 완성이 안되었을 경우
• 이 경우에는 백엔드에서 받아올 데이터 구조와 유사한 mock data를 만들어 데이터에 맞게 UI가 의도한대로 구현되는지 확인
• mock data를 만드는 과정에서 백엔드에서 받아올 데이터와 유사하게 만들 경우 실제 API와 연결할 때 훨씬 수월하게 연결 가능

2. mock data 생성

• mock data는 백엔드 API를 모방하기 때문에 실제 백엔드 API에서 응답값의 형태인 json 파일로 만들어 줘야 합니다

// cart.json
[
  {
    "id": "1",
    "category": "봄",
    "image_descriptions": "n-j-yun-chardonnay-reserva",
    "imageUrls": "/images/goodjeongdo1.jpg",
    "ml": 20,
    "name": "Goodjeongdo",
    "price": "2.00",
    "quantity": "3",
    "subcategory": "양주"
  },
  {
    "id": "2",
    "category": "여름",
    "image_descriptions": "hyeong_take_ju1",
    "imageUrls": "/images/hyeong_taek_ju1.png",
    "ml": 20,
    "name": "Boston",
    "price": "4.00",
    "quantity": "1",
    "subcategory": "양주"
  },
  {
    "id": "3",
    "category": "가을",
    "image_descriptions": "goodjeongdo",
    "imageUrls": "/images/boston1.jpg",
    "ml": 20,
    "name": "Guinness",
    "price": "6.00",
    "quantity": "2",
    "subcategory": "양주"
  }
]

• cart.json 파일의 위치는 public -> data -> cart.json
• public 폴더에 만들어 둘 경우, 서버 url을 통해 해당 파일에 접근 가능
  • http//localhost:3000/data/cart.json 주소로 접근 시 작성해 둔 데이터가 응답으로 오는 것을 확인 가능
  • http://localhost:3000 은 생략가능

3. mock data 호출

const CartList = () => {
  const [cartItems, setCartItems] = useState([]);
  useEffect(() => {
    fetch('/data/cart.json')
      .then(res => res.json())
      .then(res => {
        setCartItems(res);
      });
  }, []);
  return (
    <div className="commentList">
      <h1>Cart</h1>
        {cartItems &&
                  cartItems.map(item => (
                    <CartItem
                      item={item}
                      key={item.id}
                      setCartItems={setCartItems}
                      cartItems={cartItems}
                    />
 		 ))}
   </div>
  );
};

• fetch 함수를 통해 해당 url로 요청을 보내고 성공 시 setCartItems 함수를 통해 데이터를 cartItems 상태에 저장
• 저장한 데이터를 바탕으로 CartList 렌더링

mock data의 구조를 정할 때에도 프론트가 필요한 데이터로만 채우는 것이 아닌, 백엔드와 소통하면서 실제 api가 어떠한 구조로 프론트에게 넘겨줄 것인지 충분한 소통을 통해 구조를 잡으면서 mock data를 만드는 것이 좋습니다.