React Carousel 만들기 (1)

97godo 님의 글을 보고 캐러셀 만들기에 도전해봤습니다.

전체 코드

const TOTAL_SLIDES = 2; // 전체 슬라이드 개수(총3개. 배열로 계산)

export default function Slider() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const slideRef = useRef(null);

  // Next 버튼 클릭 시
  const NextSlide = () => {
    if (currentSlide >= TOTAL_SLIDES) {
      // 더 이상 넘어갈 슬라이드가 없으면
      setCurrentSlide(0); // 1번째 사진으로 넘어갑니다.
      // return;  // 클릭이 작동하지 않습니다.
    } else {
      setCurrentSlide(currentSlide + 1);
    }
  };
  // Prev 버튼 클릭 시
  const PrevSlide = () => {
    if (currentSlide === 0) {
      setCurrentSlide(TOTAL_SLIDES); // 마지막 사진으로 넘어갑니다.
      // return;  // 클릭이 작동하지 않습니다.
    } else {
      setCurrentSlide(currentSlide - 1);
    }
  };

  useEffect(() => {
    slideRef.current.style.transition = 'all 0.5s ease-in-out';
    slideRef.current.style.transform = `translateX(-${currentSlide}00%)`; // 백틱을 사용하여 슬라이드로 이동하는 에니메이션을 만듭니다.
  }, [currentSlide]);

  return (
    <Container>
      <Text>
        <h1>호두 아가 시절</h1>
        <p>{currentSlide + 1}번 째 사진</p>
      </Text>
      <SliderContainer ref={slideRef}>
        <Slide img={img1} />
        <Slide img={img2} />
        <Slide img={img3} />
      </SliderContainer>
      <Center>
        <Button onClick={PrevSlide}>Prev</Button>
        <Button onClick={NextSlide}>Next</Button>
      </Center>
    </Container>
  );
}

UseRef를 사용하여 Slider 구현하기

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

탑다운으로 공부하고 있었기 때문에 CSS Transition에 대한 내용인지도 몰랐습니다.

Transition은 아래 4가지의 shorthand property입니다.

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

그러니까 'all 0.5s ease-in-out'의 경우 아래와 같습니다.

• property: all (모든 속성이 transition 효과를 얻는다.)
• duration: 0.5s (0.5초 동안 변화가 일어난다.)
• timing-function: ease-in-out (시작 지점과 종료 지점의 변화가 천천히 진행된다.)

translateX(-${currentSlide}00%);의 경우 이해하기 쉽습니다.
캐러셀의 경우 전체 이미지를 배열처럼 쭉 나열한 것인데, 이를 다음 이미지로 넘기는 것을 구현한 것이라고 볼 수 있습니다.

useEffect의 [currentSlide]를 통해 prev or next 버튼으로 currentSlide의 state가 업데이트 되는 경우 슬라이딩 되도록 해주는 코드라고 볼 수 있습니다.

Level up

위 코드에서 개선하고 싶은 부분은 총 3가지 입니다.

• auto slide 기능 추가
• 캐러셀 전체의 이미지 개수와 현재 위치를 보여주는 dot 추가
• 맨 마지막 슬라이드에서 처음으로 돌아갈 때 -> 방향이 아닌 <- 방향으로 초기화 되는 문제

다음 포스팅에서는 이 3가지에 대한 내용을 기록해보겠습니다.