1차 프로젝트로 모트모트 사이트 클론코딩을 진행했다.
1주일이 지난 지금, 코드 리뷰를 진행하고자 한다.

슬라이드 기능

슬라이드 기능을 처음에는 slick slide라는 3rd party library를 사용했다.

곧이어 오는 슬랙에는 라이브러리를 최대한 쓰지 말라는 그런 말씀이 있었다. 그래서 순수 리액트로 슬라이드 기능을 만들기 시작했다.

logic을 생각해보면서도 감이 안잡혀서 다른 사람이 기능 구현한 것을 참고하며 내가 만들려는 사이트에 맞춰 수정했다.

아직은 완벽하게 100% 로직은 못짜는 것 같다! 아쉽지만 천천히 노력해봐야하는 부분이라고 생각한다.
(머리속에 예제가 많아지면, 정답률과 답을 찾아가는 속도가 빨라질거라 믿는다. )

onClick event

  onChangeDetailImg = index => {
    let nextSlideIndex = index;
    if (this.props.detailData.image.length <= index) nextSlideIndex = 0;
    if (index < 0) nextSlideIndex = this.props.detailData.image.length - 1;

    this.setState({ sliderIndex: nextSlideIndex });
  };

1) 매개변수 index를 가진다.
2) 매개변수를 변수로 선언한다.
3) image 배열의 길이가 매개변수의 값을 비교하여 state 변경 값에 조건에 맞는 값을 넣는다.

첫번째 슬라이드(이미지)

<div className="mainSlide">
 <div
  className="mainSlideImgs"
  style={{transform: `translate3d(${-500 * this.state.sliderIndex}px,0px,0px)`,}}>
  {image?.map((img, index) => {return (<div className="mainSlideImg" key={index}>
    <img alt={name} src={img} />
   </div>);
   })}
   </div>
 </div>

1) this.state.sliderIndex state 값의 변화에 따라 style 변화를 준다. 500px만큼 왼쪽으로 이동
2) img 태그를 map함수로 돌린다.

두번째 슬라이드(이미지)

<div className="productSlideImgs">
 <ul>
  {image?.map((img, index) => {
   return (<li className="productSlideImg"
   key={index}
   onClick={() => {this.onChangeDetailImg(index);}}>
   <img alt={name} src={img} />
   </li>);
   })}
 </ul>
</div>

1) img를 map함수를 돌린다.
2) 두번째 슬라이드 이미지에 따라서 첫번째 슬라이드에서 보이는 이미지를 변화시키고 싶으므로, 해당 슬라이드에 onClick 이벤트를 추가한다.

슬라이드 CSS

@mixin detail-flex-center{
  display: flex;
  justify-content: center;
}

.productDetailImg{
  position: relative;
  padding-bottom: 30px;

  .mainSlide{
    position: relative;
    justify-content: center;
    padding-right: 10px;
    width: 500px;
    overflow-x: hidden;

    .mainSlideImgs{
      width: 2800px;
      transition: all 300ms ease 0s;
      overflow: hidden;

      .mainSlideImg{
        display: inline-block;
        width: 500px;
        height: 500px;
      }
    }
  }

  .productSlideImgs {
      width: 100px;
      margin-left: 10px;
      
    .productSlideImg{
      padding-right: 10px;
      padding-bottom: 5px;
    }
  }
}

css는 주로 flex를 주어서 슬라이드의 방향을 조정했다.
첫번째 슬라이드의 경우, 하나의 사진만 해당 위치에서 보여야 하므로 overflow hidden을 주어서 다른 위치에 있는 이미지는 보이지 않게 한다.

code review

이 코드에서 칭찬받은 점은, Optional Chaining 연산자이다.

Optional Chaining(?.)? 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.
만약 참조가 nullish라면, 에러를 내보내기보다 undefined를 내보낸다.
어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다.

지적받은 점은 매개변수의 재사용 부분이다.

  onChangeDetailImg = index => {
    if (this.props.detailData.image.length <= index) index = 0;
    if (index < 0) index = this.props.detailData.image.length - 1;

    this.setState({ sliderIndex: index });
  };

매개변수를 재사용하는 것보다는 새로운 변수로 선언해서 사용해주는 것이 가독성 부분에서 좋다고 한다.

코드리뷰를 받으면서 Self-refactoring을 꼼꼼히 해야겠다고 느꼈다.
css 부분에 대한 리뷰를 많이 받아서 2번째 페이지를 짤 때에는 리펙토링한 뒤 깃허브에 푸시해야겠다고 다짐한다.

#project #React.js #SASS