지금은 1차 프로젝트 중.
메인페이지 구현을 담당하게 되었는데, carousel이 있는 페이지였다...!
처음 만드느라 20시간이나 걸린 carousel 코드를 복기해보아야겠다.

Carousel의 특징

한정된 화면이 빙글빙글 회전목마처럼 도는 구조이다.
화면이 3개이고 각 인덱스를 1, 2, 3이렇게 주었다면 화면이 : 1→2→3→1→2→3 이렇게 돌아야한다.

계획

state에다가 지금 화면에 띄워진 페이지의 index를 준다.
그리고 setState를 사용해서 state 상의 페이지 index를 1개씩 늘려준다.
동적 class를 활용하여 기존 index의 이미지는 사라지게 하고, 새로이 state에 반영된 index에 해당하는 사진은 화면에 띄워지도록 한다

code

states

state = {
    slides: [
      {
        id: 1,
        name: "firstSlide",
        url: "https://cdn.imweb.me/thumbnail/20200118/ee11fcc596837.jpg",
      },
      {
        id: 2,
        name: "secondSlide",
        url: "https://cdn.imweb.me/thumbnail/20190820/1304ccbbcbcf9.jpg",
      },
      {
        id: 3,
        name: "thirdSlide",
        url: "https://cdn.imweb.me/thumbnail/20190820/c970d753d4c5a.jpg",
      },
    ],
    selected: 1,
  };

core code

handleCurrentSlide = () => {
    const { selected } = this.state;
    this.setState({ selected: selected === 3 ? 1 : selected + 1 });
  };

render part

<div
  className={`slideWrapper ${
    selected === slide.id ? "active" : "disappear"
    }`}
>
  <div
    className="slideImg"
    style={{ backgroundImage: `url(${slide.url})` }}
  ></div>
  <div className="comment letter">
    <p>특별한 분들께 드리는</p>
    <p>프리미엄 과일 선물</p>
    <strong className="logo">MANNAMCHU</strong>
  </div>
</div>

결과물