이번화에서는 지난번에 다루던 Category 메뉴에서 Product들을 어떻게 불러오는지 알아볼 것이다.
: 배너에서는 react-slick이 사용되었다. 최대한 서드파티라이브러리는 사용하지 않으려 했지만... 슬릭은 꼭한번 사용해보고 싶었다.
// Banner Component
import Slider from 'react-slick';
import NextArrow from '../../../component/Banner/NextArrow';
import PrevArrow from '../../../component/Banner/PrevArrow';
// index.js
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
const settings = {
arrows: true,
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 4000,
speed: 500,
nextArrow: <NextArrow />,
prevArrow: <PrevArrow />,
};
<Slider {...settings}>
{slideSampleImage.map((image) => {
return (
<div key={image.id} className='bannerImageBox'>
<img
src={image.url}
alt='bannerImage'
className='bannerImage'/>
</div>);
})}
</Slider>
<div className='nextArrowBox' onClick={onClick}>
<img
src='/images/rightarrow.png'
className='nextArrow'
alt='arrow next'/>
<img
src='/images/rightarrow2.png'
className='hideNextArrow'
alt='arrow next'/>
</div>
<div className='bannerTitle'>
<span className='bannerTitletext'>{category_name}</span>
<span> {'>'} </span>
<span className='bannerTitletext'>
{subcategories && subcategories.some((ele) =>
ele.subcategory_name === subcategory_name) ? subcategory_name : ''}
</span>
</div>
: 드디어 대망의 ProductList 부분이다.
// 상단부
<div className='smallProductList'>
{giveCatProduct.length && giveCatProduct.map((productElement, productIndex) => (<RandomProduct key={productIndex} product={productElement} />))}
</div>
// 하단부
<div className='productList'>
{giveSubProduct.map((productElement, productIndex) => (<Product key={productIndex} product={productElement} />))}
</div>
// -----생략 -----
: ProductList의 하위 컴포넌트인 Product는 제품 Box 한개 한개에 해당한다.
이 컴포넌트의 내부에서는 동적 라우팅이 일어난다. 왜냐하면 이것을 클릭했을 때 제품 상세페이지로 넘어가야하기 때문이다. 이때 Product_id 값을 이용해서 각각의 path를 구분지었다.
goProductDetail = () =>
{this.props.history.push(`/store/${this.props.product.product_id}`)};
export default withRouter(Product);
// Routes.js 에서 해당 부분
<Route exact path='/store/:id' component={ProductDetail} />
3부 링크는 여기!!