Card 컴포넌트 만들기

온라인 강의를 들으면서 차근차근 react를 배워가고 있다.
숙제가 하나 있었는데, 대충 쇼핑몰의 상품을 나타낼 Card 컴포넌트 만들기였다.

1. data가져오기
2. 컴포넌트 생성
3. props를 이용하여 값 넘기고 받아오기

1. data가져오기

강의자료로 올라온 data를 따로 src폴더에 js파일로 빼두고 import

//App.js
import data from "./data.js";

2. 컴포넌트 생성

컴포넌트 생성. 간지나보인다고 생각해서 js파일 따로 팜.

//shoesCard.js
/* eslint-disable no-unused-vars */

const ShoesCard = (props) => {
  return (
    <div className="col-md-4">
      <img
        className="shoesImg"
        src={import.meta.env.BASE_URL + "./img/shoes" + (props.i + 1) + ".jpg"}
      />
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}</p>
      <p>{props.shoes.price}</p>
    </div>
  );
};

export default ShoesCard;

3. props를 이용하여 값 넘기고 받아오기

넘긴 값 : data.js의 오브젝트자료 하나씩. i값. map으로 하나씩 넘김.

      <div className="container">
        <div className="row">
          {
            data.map((shoes,i) => (
              <ShoesCard shoes={shoes} i={i}/>
            ))
          }
        </div>
      </div>

나혼자 만들었을때는 img 쉽게 가져온다고 data.js에 이미지 url 새로 박고, 몸비틀어 가면서 만들었는데....
설계가 확실히 중요하다 생각된다. 훨씬 깔끔한 코드가 완성됐다.