<Row>
{props.shoes.map((eachShoe,i) =>{
return(
<Card eachShoe={eachShoe} navigate={props.navigate}></Card>
)
})}
</Row>
초반부에서 진행할때 강사님은 일반 부트스트랩에서 가져오셔서 사용하셨고,
저는 그때 음성으로 리액트 부트스트랩에서 가져오는게 좋다고 하셔서
리액트 부트스트랩에서 가져와서 사용하였는데 그래서 그런건지 ajax로 데이터 가져올시 추가된 3개가 옆으로 추가되네요
function CardCase(props) {
console.log("component 시작")
const n = 3;
let groups = [];
for (let i = 0; i < props.shoes.length; i += n) {
groups.push(props.shoes.slice(i, i + n));
}
console.log(groups)
return (
<>
{
groups.map((group, j) => (
<Row>
{
group.map((eachShoe, i) => (
<Card eachShoe={eachShoe} navigate={props.navigate}/>
))
}
</Row>
))
}
</>
);
}
이런식으로 추가해서 해결하긴했는데 원본 코드 부분 확인하고 싶은데 알 수 있을까요?
다른 질문글에서 말씀해주신 class에 col-md-4 부여, style에 flex 부여는 해봤는데 안되네요