간단한 쇼핑몰 만들기 클론 중 상품의 사진, 제목, 가격 정보를 하나의 컴포넌트로 만들고, 반복문을 통해 코드를 단축시키고자 함
-현재 코드-
<div className="container">
<div className="row">
<div className="col-md-4">
<img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
<h4>{ shoes[0].title }</h4>
<p>{ shoes[0].price }</p>
</div>
<div className="col-md-4">
<img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%" />
<h4>상품명</h4>
<p>상품정보</p>
</div>
<div className="col-md-4">
<img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />
<h4>상품명</h4>
<p>상품정보</p>
</div>
</div>
</div> 반복되는 부분이 3개나 있어 보기 안좋다. 저부분을 컴포넌트로 만들어보자.
...생략...
<Product shoes={shoes}></Product>
...생략...
function Product(props) {
return (
<Col>
<img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"></img>
<h4>{props.shoes[0].title}</h4>
<p>{props.shoes[0].price}</p>
</Col>
);
}이렇게 컴포넌트는 만들었다. 하지만 하드코딩을 했기 때문에 같은 상품이 3번 반복되어 나온다. 이를 위해 데이터바인딩을 새로 해야한다. 그리고 세번반복을 map()함수를 사용하여 코드를 줄인다.
...생략...
{
shoes.map((a, i)=>{
return (
<Product i={i} shoes={shoes[i]}></Product>
);
})
}
...생략...
function Product(props) {
return (
<Col>
<img src={`https://codingapple1.github.io/shop/shoes${props.i+1}.jpg`} width="80%"></img>
<h4>{props.shoes.title}</h4>
<p>{props.shoes.price}</p>
</Col>
);
}먼저 컴포넌트를 사용하는 곳에서 map의 매개변수인 i를 사용하여 각 shoes 데이터의 인덱스를 활용해 넘겨주고, 컴포넌트 정의 부분에서는 간단히 props.shoes라고만 썼다.
이후 이미지도 동적으로 바꾸기 위해 ${} 문법을 사용하고 i변수를 만들어서 props.i로 받았다.
컴포넌트를 만드는건 쉬웠지만 이후 반복문을 사용하면서 데이터바인딩을 다시 하는 부분에서 막힘이 있었다. map함수에서 Product를 호출할때 shoes={shoes[i]} 를 생각하지 못한것이었다. 부모에서 props를 넘겨줄때 작명={~} 여기서 ~부분이 state의 여러가지 상태를 넘길 수 있다는 것을 기억하자!
