React Img Slider 구현(useRef)

Slide 구현 gif

캐럴 슬라이드 구현

프로젝트중 슬라이드를 구현해야해서 찾아보니깐 useRef로 구현가능하다는걸 배웠다. 
React에서 제공하는 기본 Hook들을 제대로 사용할줄 알면 금방 작성할 수 있다.

import React from "react";
import styeld from "styled-components";
import { useState, useRef, useEffect } from "react";

const SlideComponent = () => {
  const slideRef = useRef(null);
  const [currentImgOrder, setcCurrentImgOrder] = useState(0);
  const IMG_WIDTH = 200;
  const slideRange = currentImgOrder * IMG_WIDTH;

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

  const moveToNextSlide = () => {
    if (currentImgOrder === 2) return;
    setcCurrentImgOrder(currentImgOrder + 1);
  };

  const moveToPrevSlide = () => {
    if (currentImgOrder === 0) return;
    setcCurrentImgOrder(currentImgOrder - 1);
  };
  return (
    <>
      <Wrapper>
        <SlideWrapper ref={slideRef}>
          <Img src="/image/js.png" />
          <Img src="/image/react-native-black.png" />
          <Img src="/image/typescript.png" />
        </SlideWrapper>
      </Wrapper>
      <button onClick={moveToPrevSlide}>prev</button>
      <button onClick={moveToNextSlide}>next</button>
    </>
  );
};

export default SlideComponent;

const Wrapper = styeld.div`
  width: 200px;
  height: 200px;
  overflow: hidden;
`;

const SlideWrapper = styeld.div`
  display: flex;
  width: 100%;
  height:100%;
`;

const Img = styeld.img`
  width: 200px;
  height: 200px;
`;

코드설명

가장 상단 Wrapper에다가 overflow: hidden을 걸어줘야 작동을 한다. SlideWrapper에다가 overflow: hidden을 걸어주게되면 밖에 있는 이미지들이 아예 보이지않게 처리가 되버린다!!! 그리고 이미지들을 감싸놓을 SlideWrapper에다가 ref를 지정해줘서 직접 dom요소를 조작하도록 작성했다. 
prev버튼, next버튼을 누르면 useState로 설정해둔 currentImgOrder값이 변경되도록 작성하고 useEffect()를 사용해서 state값이 변경될때마다 useRef로 지정한 slideRef의 translateX값이 변경되도록 코드를 작성했다.
console.log에다가 slideRef를 찍어보면 dom요소에서 조작할 수 있는 속성값들이 전부 다 나와서 확인이 가능하다.

useRef로 조작한 모습을 콘솔창에 찍어본 모습이다.