[React] 캐러셀/ 슬라이드 만들기

💎슬라이드 부분 태그구성

    <div className={styles.banner} >
      <div className={styles.banner_images} ref={slideRef}>
        <img className={styles.banner_img}
          src="./banner1.jpg"/>
        <img className={styles.banner_img}
          src="./banner2.jpg"/>
        <img className={styles.banner_img}
          src="./banner3.jpg"/>
        <img className={styles.banner_img}
          src="./banner4.jpg"/>
      </div>
    </div>

슬라이드 이미지를 모두 감싸는 태그를 만들고, flex속성으로 이미지들을 가로로 모두 나열한다.

.banner_images {
  width: 100%;
  display: flex;
}

전체를 보여주기 위해 화면을 축소했다. 각 색상별로 총 4개의 슬라이드 이미지가 일렬로 정렬되어 있다.

💎슬라이드 영역 안의 이미지만 보여주기

💍width,height - 슬라이드 이미지를 감싼 태그 크기 지정

.banner {
  width: 100%;
  height: 15em;
  overflow: hidden;
  background-color: whitesmoke;
}

슬라이드 이미지들을 감싸고 있는 banner_images 태그의 너비와 높이를 지정해준다.
슬라이드 이미지를 차례로 이동시킬 때 해당 태그 영역 밖으로 나간 이미지들은 숨겨줄 것이기 때문이다.

💍overflow : hidden - 영역밖의 이미지 숨기기

그리고 overflow: hidden css 속성으로 영역밖의 이미지들을 숨긴다.

overflow: hideen 미적용 - 버튼 클릭시 왼쪽으로 이동하는 이미지들

overflow:hidden을 적용했을 때

• 주의 : 슬라이드 버튼은 슬라이드 태그와 별도로 분리해 만들어 위치시켜야 한다.
  슬라이드 이미지와 함께 이동해 버릴수도 있기 때문!

💎버튼 클릭 이벤트

💍onClick - 버튼별 클릭 이벤트 지정

왼쪽, 오른쪽 버튼에 각각 함수를 지정해주었다.

      <div className={styles.banner_buttons}>
        <button className={styles.banner_button}
          onClick={handleBannerLeft}
        > (
        </button>

        <button className={styles.banner_button}
          onClick={handleBannerRight}
        > )
        </button>
      </div>

💍useState - 슬라이드 이미지 순서 지정

맨 마지막 이미지 다음에는 첫번째 이미지가, 맨 첫번째 이미지 이전에는 마지막 이미지가 나와야 한다.

const [slideState, setSlideState] = useState(0);
const MAX_SLIDES = 3;

  const handleBannerRight =() => {
    if(slideState >= MAX_SLIDES) {
      setSlideState(0)
    } else {
      setSlideState(slideState + 1);
    }
  }

오른쪽 버튼을 클릭하면, 다음 슬라이드 이미지가 보이는 영역으로 이동할 수 있도록 해야 한다.
slideState 초기값을 0으로 설정한 뒤, 클릭할때마다 1씩 증가시킨다.
최대 이미지의 갯수인 MAX_SLIDES를 초과하면 다시 0으로 초기화 시킨다.

  const handleBannerLeft =()=> {
    if(slideState === 0) {
      setSlideState(MAX_SLIDES);
    }else {
      setSlideState(slideState - 1);
    }
  }

왼쪽 버튼을 클릭하면, 클릭할때마다 slideState를 1씩 감소시킨다.
slideState가 0이되면 최대 갯수(마지막이미지를 위해) MAX_SLIDES로 state를 업데이트 한다.




그럼 이제 왜 이렇게 하는지를 보자!

💍useRef - ref 값 지정

배너 이미지를 감싸고 있던 banner_images에 ref를 설정해준다.

    <div className={styles.banner} >
      <div className={styles.banner_images} ref={slideRef}>
        <img className={styles.banner_img}
          src="./banner1.jpg"/>
        <img className={styles.banner_img}
          src="./banner2.jpg"/>
        <img className={styles.banner_img}
          src="./banner3.jpg"/>
        <img className={styles.banner_img}
          src="./banner4.jpg"/>
      </div>
    </div>

💍useEffect - state 업데이트 시마다 이미지 이동

  useEffect(()=> {
    slideRef.current.style.transition ="all 0.5s ease-in-out";
    slideRef.current.style.transform= `translateX(-${slideState}00%)`;
  },[slideState])

• transform : 버튼을 클릭할때마다 slideState는 1씩 증감한다.
  slideState가 업데이트될때마다 useEffect는 슬라이드 이미지를 감싼 banner_images에 지정된 ref값인 slideRef를 통해 이미지를 이동시킨다.
  slideRef에 transform 값을 지정해주어 왼쪽 가로방향으로 이미지를 이동시켜준다.
  첫번째 이미지는 원래 위치에서 100%, 두번째 이미지를 보여주기 위해서는 원래 위치에서 200%만큼을 왼쪽으로 이동시켜주어야 한다.

• transition : 좀 더 부드럽게 움직이는 효과를 위해 all 0.5s ease-in-out를 추가해 0.5초동안 움직이도록 설정해준다.

💎[GIF] 결과물

Reference

peppermint100.log - [JS]React Hooks로 Carousel Slider 만들기