Mock Data, useState, useEffect를 통해 데이터 불러오기

Mock Data란?

• Mock은 거짓이라는 뜻인데 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터입니다. Mock Data는 렌더링해서 개발자도구 console에서만 나오는 값을 화면에도 나오게 할 수 있습니다.

useState란?

• 먼저 state는 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값을 의미합니다. useState는 리렌더링이 될 때 변수를 업데이트해주는 함수입니다.

useEffect란?

• 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook입니다. Hook은 함수형 컴포넌트에서 state와 생명주기 기능을 연동할 수 있게 해줍니다.

import React, { useEffect, useState } from 'react';
import './Cart.scss';

function Cart() {
  const [carts, setCarts] = useState([]);
  
  useEffect(() => {
    fetch('/data/cart.json')
    .then(response => response.json())
    .then(result => {
      setCarts(result);
     });
  }, []);
  
  return (
     {carts.map(item => {
          return (
            <div className="first-firniture" key={item.id}>
              <div>
                <img className="furniture" src={item.picture} alt="가구" />
              </div>
              <div className="vangstaFirst">
                <p className="vangsta">
                  <b>{item.name}</b>
                </p>
                <p className="extendTable">{item.detail}</p>
                <p>{item.length}</p>
                <div className="button">
                  <select className="select">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                  </select>
                  <span className="delete">삭제</span>
                </div>
              </div>
              <div className="money">
                <b>{item.price}</b>
              </div>
            </div>
          );
        })}
    );
}

useEffect, useState 를 사용하니 import 해줍니다.

useState
carts는 변수고 setCarts는 carts라는 변수를 업데이트해주는 함수입니다.

useEffect
setCarts가 실행될때마다 렌더링이 다시 되는데 개발자도구 console에 뜹니다.
첫 렌더링 이후 한 번만 데이터를 가져오기 위해 fetch를 useEffect[]에서 사용합니다.
useEffect 안에 있는 코드는 html 렌더링 후에 동작합니다.
console.log를 여기저기 쓰고 '사용자도구 - console' 을 통해 흐름을 이해하면 좋습니다.
안에 있는 console.log는 처음 렌더링때만 찍히고 밖에있는 console.log는 반복적으로 찍힙니다.

[
  {
    "id": 1,
    "name": "VANGSTA 방스타",
    "detail": "확장형테이블, 블랙/다크브라운",
    "length": "80/120x70 cm",
    "price": 129000,
    "picture": "/images/furniture.avif"
  },
  {
    "id": 2,
    "name": "TEODORES 테오도레스",
    "detail": "의자, 블랙",
    "length": "",
    "price": 34900,
    "picture": "/images/TEODORES.png"
  },
  {
    "id": 3,
    "name": "NISSE 니세",
    "detail": "접이식의자, 블랙",
    "length": "",
    "price": 19900,
    "picture": "/images/NISSE.jpg"
  }
]

cart.json 파일인데 여기에 Mock Data를 통해 데이터를 담았습니다.

상품 3개가 있는데 Mock Data에서 id 3개를 가져온것이고 이름, 세부사항, 길이, 가격, 사진 데이터를 가져왔습니다.