React - 쇼핑몰 만들기(3)

구현하는 기능과 배우는 컨셉

✔ 컴포넌트화 하기
✔ 컴포넌트마다 다른데이터 전송해주기 (데이터바인딩)
✔ 컴포넌트를 반복문으로 쉽게 작성하기 (데이터바인딩)
✔ 이미지 데이터바인딩하기

👉컴포넌트화 하기

import Data from './data';
function App() {
let [shoes, shoeState] = useState(Data);
    <div className="container">
      <div className="row">
        <Card shoes={shoes}/>
        <Card shoes={shoes}/>
        <Card shoes={shoes}/>
      </div>
    </div>
  </div>
)
function Card(){
return (
  <div className="col-md-4">
    <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
    <h4>{ shoes[0].title }</h4>
    <p>{ shoes[0].content } & { shoes[0].price }</p>
  </div>
)
}

◾ 먼저 data.js에 있는 data를 가져와서 사용해야하기 때문에, Data를 useState 초기값으로 설정한다.
◾ 이 data값을 활용하기위해서 shoes라는 state에 데이터를 보관해둔다.
◾ 함수 Card를 만들어서 컴포넌트 <Card / >를 만든다.
◾ 함수 Card안에는 원래 컨테이너안에 있는 html들을 넣은 후, shoes의첫번째 title,content,price를 넣는다.
◾ 이렇게하면 첫번째 데이터에 있는것만 UI에 Card3장이 보여진다.

👉각각의 Card 컴포넌트마다 다른 데이터 전송해주기

      <div className="container">
        <div className="row">
          <Card shoes={shoes[0]} />
          <Card shoes={shoes[1]} />
          <Card shoes={shoes[2]} />
        </div>
      </div>
      function Card(props){
  return (
    <div className="col-md-4">
      <img src="" />
      <h4>{ props.shoes.title }</h4>
      <p>{ props.shoes.content } & { props.shoes.price }</p>
    </div>
  )
}

◾ 이제는 아까처럼 props.shoes[0].title이 아니라 props.shoes.title만 써도
위에서 props로 각각 shoes[0], shoes[1], shoes[2]를 전달받기때문에 각각 데이터로 사용가능하다

👉Card 컴포넌트 반복문 돌리기

 <div className="container">
        <div className="row">
          {shoes.map((num, i) => {
            return <Card shoes={num} i={i} key={i} />;
          })}
        </div>
      </div>
    </div>
  );
}

function Card(props) {
  return (
    <div className="col-md-4">
      <img src={props.shoes.img} width="100%" />
      <h4>{props.shoes.title}</h4>
      <p>
        {props.shoes.content} &{props.shoes.price}
      </p>
    </div>
  );
}

◾ 한 단계 더나아가서, map함수를 활용하면 Card 컴포넌트를 3개쓰지않고 하나만 써서 사용할 수있다.
◾ 만약 3개가아니라 수십만개이상이라면 map함수는 절대적이다.
◾ shoes에 있는 3개의 data를 map함수를 통해 num 파라미터에 담고, 그것을 shoes의 props로 전달한다. 이는 아까 Card 컴포넌트를 3개 작성한것과 동일하다
◾ 이때, 반복문을 사용할시 key값은 꼭 적어줘야 warning이 안뜬다.
◾ 나같은 경우엔 이미지도 데이터안에 만들어서 각각 사용하게했다.
◾ img는 i를 활용해 src에서 '주소' + i + '.jpg' 식으로 만들수있다.
◾ 이것은 실제 백엔드가 데이터를 만들때 같이 협업해서 해야될거같다. 주소가 제각각이라 지금은 못한다.