캐러셀을 만들어보자.

인터넷에서 얻어낸 캐러셀 만드는 법은 한번에 한 이미지씩 넘어가도록 구현하는 방법만 있는거같길래 그 내용들을 참고해서 넷플릭스의 캐러셀처럼 여러 컨텐츠를 한번에 넘기도록 구현했다.

CarouselTesT.js

import "./CarouselTesT.css";
import { useEffect, useRef, useState } from "react";

function CarouselTesT() {
  const container_Carousel = useRef();
  const [nowX, setNowX] = useState(0);
  useEffect(() => {
    container_Carousel.current.style.transform = `translateX(${nowX}vw)`;
  }, [nowX]);
  // useState 말고 useEffect를 이용해야할듯.
  const clickLeftButton = () => {
    // setNowX(nowX + 20);
    setNowX((prop) => prop + 20);
    console.log(`it's work ${nowX}`);
  };
  const clickRightButton = () => {
    setNowX(nowX - 20);
    console.log(`it's work ${nowX}`);
  };
  return (
    <div className="body" style={{ overflow: "hidden" }}>
      <div>{nowX}</div>
      <label className="left" onClick={clickLeftButton}>
        left
      </label>
      <label className="right" onClick={clickRightButton}>
        right
      </label>
      <div className="container_Carousel" ref={container_Carousel}>
        <div className="inner">
          <img src={"img/img1.jpg"} alt="" />
        </div>
        <div className="inner">
          <img src={"img/img2.jpg"} alt="" />
        </div>
        <div className="inner">
          <img src={"img/img1.jpg"} alt="" />
        </div>
        <div className="inner">
          <img src={"img/img2.jpg"} alt="" />
        </div>
        <div className="inner">
          <img src={"img/img1.jpg"} alt="" />
        </div>
        <div className="inner">
          <img src={"img/img2.jpg"} alt="" />
        </div>
        <div className="inner">
          <img src={"img/img1.jpg"} alt="" />
        </div>
        <div className="inner">
          <img src={"img/img2.jpg"} alt="" />
        </div>
        <div className="inner">
          <img src={"img/img1.jpg"} alt="" />
        </div>
        <div className="inner">
          <img src={"img/img2.jpg"} alt="" />
        </div>
      </div>
    </div>
  );
}

export default CarouselTesT;

CarouselTesT.css

.container_Carousel{
    width: 300vw;
    transition: transform 0.5s;
}

.inner img{
    width: 10%;
    float: left;

}

.left{
    position: absolute;
    z-index: 10;
    top: 30%;
    transform: translateY(-50%);
    padding: 10px;
    cursor: pointer;
    color: white;
    font-weight: 900;
    ;
}

.right{
    position: absolute;
    z-index: 10;
    top: 30%;
    right: 10px;
    transform: translateY(-50%);
    padding: 10px;
    cursor: pointer;
    color: white;
    font-weight: 900;
}

useState를 이용해서 버튼 누를때마다 10씩 더하거나 빼도록 하였고,
useRef를 이용해서 스타일을 넣을 태그를 선택했다.
그리고 useEffect를 이용해서 nowX값이 변할때마다 style을 바꾸도록 만들었다.

뼈대 html과 css는
https://www.youtube.com/watch?v=qHzSQrLjxlQ&t=293s (코딩애플)
https://www.youtube.com/watch?v=JryRu5zby3A (코남) 를 참고했다.

맨처음엔 useState와 버튼에 클릭되는 함수만을 이용해서 변하도록 하려했지만,
한번클릭할때 작동되지않고 그 다음번 클릭때 이전 변동값이 적용되어서 골머리를 앓았다.

useState는 비동기방식이라 리렌더링 되기전까지는 적용되지않는다고해서, useState로 적용된 값을 즉각적으로 useEffect로 받고, 변동이 감지되면 이 훅에서 즉각적으로 style에 수정되도록 하였다.

아무 이미지 3장만 준비하고 위의 코드를 그대로 복붙하면 쉽게 캐러셀을 구현할 수 있다. 이를 응용해서 넷플릭스 클론코딩에도 적용해봤다.