안녕하세요 코딩애플님 🙂
좋은 강의 만들어 주셔서 감사드립니다!
Q) 상품 3개의 정보를 보여주는 부분이 가로 정렬이 아닌 세로 정렬로 보여집니다
본 강의를 들으면서 코드로 구현하는 과정에서
상품목록이 보여지는 부분을 props로 만들 때, 따로 페이지를 만들어서 props로 전달해 보았거든요!
(강의 내용에서는 component명이 Card지만, 저는 Product로 이름만 바꾸어보았습니다)
import React from 'react';
const Product = (props) => {
return (
<div className="product">
<div className="col-md-4">
<img src={'http://codingapple1.github.io/shop/shoes' + (props.i + 1) + '.jpg'} width="100%" />
<h4> {props.shoes.title} </h4>
<p> {props.shoes.content} & {props.shoes.price} </p>
</div>
</div>
);
};
export default Product;
그리고 App.js에서 shoes.map을 이용해서 반복문을 사용했습니다
<div className="container">
<div className="row">
{
shoes.map((a, i) => {
return (
<Product shoes={shoes[i]} i={i} key={i} />
)
})
}
</div>
</div>
코드는 강의와 같은데 다만 Product Component(=Card Component)를 페이지만 달리 하였을 뿐인데
제 화면에서는 3개의 상품이 가로정렬이 안되고 세로정렬로 나와서 질문드립니다.
(App.js에서 import해오는 과정도 모두 확인하였고, 화면에는 3개의 상품이 잘 나오고있습니다.
다만, 강의에서 보여주신 것처럼 full화면일 때 가로로 3개가 나열되지 않고 세로로 정렬되고 있습니나)
코드를 하나하나 되짚어봐도 해결 방법을 잘 모르겠어서 질문 드립니다 🙂
감사합니다.
