캐러셀 기능 구현하기

constructor() {
    super();
    this.state = {
      currentSlide: 0,
      TOTAL_SLIDES: 2,
      btn01: true,
      btn02: false,
      btn03: false,
    };
  }

1차 프로젝트로는 class형 컴포넌트로 구현하기 때문에 hooks 대신에 lifecycle을 이용했다
constructor() 컴포넌트의 생성자 메서드인데 컴포넌트를 만들 때 처음으로 실행된다
이 메서드에서 초기 state를 정할 수 있다

<ul className="listContainer">
  <li className="list"
 style={{
    transform: `translateX(-${currentSlide}00%)`,
    transition: 'all 0.5s ease-in-out',
}}>
    1 {<!-- 이거는 일단 표시용, 실제 배포때는 삭제됩니다 -->}
    <Goods/>
    <Goods/>
    <Goods/>
    <Goods/>
  </li>
  <li className="list"
 style={{
    transform: `translateX(-${currentSlide}00%)`,
    transition: 'all 0.5s ease-in-out',
}}>
    2
    <Goods/>
    <Goods/>
    <Goods/>
    <Goods/>
  </li>
  <li className="list"
 style={{
    transform: `translateX(-${currentSlide}00%)`,
    transition: 'all 0.5s ease-in-out',
}}>
    3
    <Goods/>
    <Goods/>
    <Goods/>
    <Goods/>
  </li>  
</ul>

이렇게 3개의 li요소를 가진 ul로 슬라이드 영역을 잡아주고
ul 전체영역을 300vw, li영역을 100vw으로 잡고
2번째 li요소 (=2번째 슬라이드) 가 보고 싶으면 trasform: translateX(-100vw)
3번째 슬라이드가 보고 싶으면 transform: translateX(-200vw)
음수로 translate 속성을 주는데, 이렇게 음수로 주게 되면
다음에 오는 영역 (각각 두번째, 세번째 슬라이드 영역)이 100vx, 200vw만큼 이동하게 되서
현재 화면에 보일 수 있게 된다

ul요소 밖에 있는 요소들은 overflow: hidden 스타일 속성을 통해 보이지 않게 설정했다

참고한 유튜브영상:
https://www.youtube.com/watch?v=JryRu5zby3A

인라인으로 스타일 속성을 주며 안된다고 알고 있었지만
해당하는 요소를 동적으로 지정할 때에는 인라인으로 주는 거라고 한다

<div className="pre" onClick={this.handlePrevSlide}></div>
<div className="next" onClick={this.handleNextSlide}></div>

슬라이드 양끝에 있는 버튼을 누르면 왼쪽으로 가거나 오른쪽으로 가게되는데 이를 구현하는 버튼을 구현했다
1번에서 this.state로 currentSlide: 0, TOTAL_SLIDES: 2 설정했고
그러한 currentSlide, TOTAL_SLIDES state 속성을 가지고 아래와 같은 함수를 선언할건데

handlePrevSlide = () => {
    let { currentSlide } = this.state;
    if (currentSlide > 0) {
      this.setState({ currentSlide: currentSlide - 1 });
      this.handleChecked();
    } else {
      this.setState({ currentSlide: 2 });
      this.handleChecked();
    }
  };

이전으로 가는 버튼을 눌렀을 때 실행할 handlePrevSlide() 함수
만약 currentSlide가 0보다 큰 경우 (두번째 슬라이드거나 세번째 슬라이드일 때) currentSlide를 -1 빼주고
그외에는 (=첫번째 슬라이드일 때에는) 세번째 슬라이드에 해당하는 currentSlide를 2로 state를 변경한다

  handleNextSlide = () => {
    let { currentSlide, TOTAL_SLIDES } = this.state;
    if (currentSlide < TOTAL_SLIDES) {
      this.setState({ currentSlide: currentSlide + 1 });
      this.handleChecked();
    } else {
      this.setState({ currentSlide: 0 });
      this.handleChecked();
    }
  };

다음으로 가는 버튼을 눌렀을 때 실행할 handleNextSlide() 함수
만약 currentSlide 가 TOTAL_SLIDES 보다 작다면 (=첫번째나 두번째 슬라이드인 경우) currentSlide에 +1 처리를 해주고

세번째 슬라이드에 있는 경우 currentSlide를 0으로 바꿔서 다시 첫번째 슬라이드로 이동하게 했다

• 그리고 버튼을 통해 슬라이드가 이동했을 때 하단의 라디오버튼도 같이 state를 변경하게끔 this.handleChecked(); 함수를 호출했다

handleChecked = () => {
    let { currentSlide } = this.state;
    if (currentSlide === 0)
      this.setState({ btn01: true, btn02: false, btn03: false });
    if (currentSlide === 1)
      this.setState({ btn01: false, btn02: true, btn03: false });
    if (currentSlide === 2)
      this.setState({ btn01: false, btn02: false, btn03: true });
  };

이러한 handleChecked() 함수란,
currentSlide가 0일 때는 첫번째 슬라이드이기 때문에 첫번째 라디오박스만 체크되고
currentSlide가 1일 때는 두번째 슬라이드이기 때문에 두번째 라디오박스만 체크되고
currentSlide가 2일 때는 세번째 슬라이드이기 때문에 세번째 라디오박스만 체크되게 state를 변경해주는 함수이다

마찬가지로 이번에는 class형 컴포넌트에
참고한 블로그:
https://velog.io/@97godo/React-Hooks%EB%A1%9C-Carousel-%EB%A7%8C%EB%93%A4%EA%B8%B0