이번화에서는 지난번에 다루던 Category 메뉴에서 Product들을 어떻게 불러오는지 알아볼 것이다.

5. Code Review

1) Category 주요 코드

(2) 제품 리스트

Banner Component

: 배너에서는 react-slick이 사용되었다. 최대한 서드파티라이브러리는 사용하지 않으려 했지만... 슬릭은 꼭한번 사용해보고 싶었다.

• slide를 이용해서 자동으로 넘어가는 기능과
• dot과 arrow를 활용한 수동으로 넘기는 기능을 구현해보았다.

// 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';

• import 부분은 총 5가지이다.
• 먼저 슬릭을 사용하고자 하는 컴포넌트에 Slider를 import 해왔고, 좌우 화살표는 컴포넌트로 직접 만들어두고 import해왔다.(나중에 제품상세 페이지에서도 사용하기 위해서이다.)
• 두번째로 index에 설치한 슬릭-carousel을 import해주었다.

    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>

• 버튼은 위와 같이 생겼다.
• 흰색과 theme 컬러의 버튼을 겹쳐두고 css로 hover시에 위에 있는 흰색 버튼의 투명도를 0%가 되도록 만들었다. 클래스 이름으로 버튼이 채인지 되도록 만들 수도 있겠지만 다른 방법을 사용해보고 싶었다.

<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>

• 배너에는 Title의 클릭 이벤트에 묶여 있는 하나의 기능이 있다.
  위의 이미지에서 보면 해당 페이지가 어느 제품의 카테고리의 묶음인지를 표시하는 텍스트가 있다. 이 부분을 배너 컴포넌트에 주었다. 위치상 어쩔 수 없었다.
• 카테고리를 클릭하면 category_name 에 해당 카테고리로 변경되고 서브 카테고리를 클릭하면 subcategories 부분이 변경된다. 다만 서브 카테고리는 카테고리가 변경될때 함께 변경되어야 하므로 조건문이 한개 더 들어간다.

Product List Component

: 드디어 대망의 ProductList 부분이다.

• product List는 MD's Pick 과 같은 상단부와 카테고리의 Product들이 나열되는 하단부가 존재한다.
• 나는 MD's Pick 같은 것이 없으니 상단에는 카테고리 product List로 만들고 하단부는 subCatecory List로 만들어버렸다.

// 상단부
<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>

// -----생략 -----

• 상단부와 하단부는 사실 비슷하게 생겼다. 아니 똑같이 생겼다. 따라서 동일한 컴포는트를 재활용해도 되지만, 시간관계상 그냥 한개 더 만들어버렸다ㅠㅠ 나중에 코드를 한번 고쳐봐야겠다.
• 리스트에는 서버로 부터 받은 제품의 정보들만 들어가는 간단한 형태이므로 코드는 생략하겠다.

Product Component

: ProductList의 하위 컴포넌트인 Product는 제품 Box 한개 한개에 해당한다.
이 컴포넌트의 내부에서는 동적 라우팅이 일어난다. 왜냐하면 이것을 클릭했을 때 제품 상세페이지로 넘어가야하기 때문이다. 이때 Product_id 값을 이용해서 각각의 path를 구분지었다.

goProductDetail = () => 
{this.props.history.push(`/store/${this.props.product.product_id}`)};

• product 컴포넌트에는 위와 같은 단 한개의 함수만 존재한다. 렌더부분은 서버로 받은 데이터를 뷰에 나타내주는 로직으로만 구성되어 있다.

export default withRouter(Product);

• withRouterHOC 방식을 사용하고 있기 때문에 export는 withRouter로 내보내주고 있다.

// Routes.js 에서 해당 부분
<Route exact path='/store/:id' component={ProductDetail} />

• 라우터에서도 id값을 활용하도록 미리 구현해두었다.
• 제품 상세 페이지에서는 어떤 방식으로 보여주고 있는지는 3부에서 계속!!

---

3부 링크는 여기!!