(React) 쇼핑몰 만들기 - 상품 데이터 삽입하기

db랑 연동하여 데이터를 갖고 오는 방법은 사용하지 않고 직접 데이터를 만들어 삽입해보는 방식으로 진행할 것이다.

src 폴더에 shoes.js 파일을 만들고 그 안에 아래코드를 넣어준다.

const shoes = [
  {
    id: 0,
    title: "White and Black",
    content: "Born in France",
    price: 120000,
  },

  {
    id: 1,
    title: "Red Knit",
    content: "Born in Seoul",
    price: 110000,
  },

  {
    id: 2,
    title: "Grey Yordan",
    content: "Born in the States",
    price: 130000,
  },
];

export default shoes;

shoes 변수를 export 해주는 파일이다.

App.js 파일로 와서 import data from "./shoes"; 라고 data라는 변수로 import 해준다.

그리고 아래처럼 state를 생성해준다.
const [shoes, setShoes] = useState(data);

블로그 프로젝트에서 처럼 map()을 이용하여 반복문으로 상품 목록을 생성해주자.
우선 상품 정보에 있는 img 태그의 src 도 shoes.js로 옮겨줘야 한다.
아래처럼.

const shoes = [
  {
    id: 0,
    title: "White and Black",
    content: "Born in France",
    price: 120000,
    src: "https://codingapple1.github.io/shop/shoes1.jpg",
  },

  {
    id: 1,
    title: "Red Knit",
    content: "Born in Seoul",
    price: 110000,
    src: "https://codingapple1.github.io/shop/shoes2.jpg",
  },

  {
    id: 2,
    title: "Grey Yordan",
    content: "Born in the States",
    price: 130000,
    src: "https://codingapple1.github.io/shop/shoes3.jpg",
  },
];

export default shoes;

다음으로는 App.js 에 있는 그림 밑에 아래 코드로 갈아끼워주면 된다.

<div className="container">
	<div className="row">
         {shoes.map((item, index) => {
           return (
             <div className="col-md-4" key={index}>
               <img src={item.src} width="80%" />
               <h4>{item.title}</h4>
               <p>{item.content}</p>
               <p>{item.price}</p>
             </div>
           );
         })}
	</div>
</div>

짠!