[React] 이미지 슬라이드(가로형,버튼O,반응형) 만들기

이미지 슬라이드를 만든 코드를 남겨두려고 한다. 웹 서칭을 많이 했는데 나와 완전 똑같은 것을 구현해둔 선배 개발자 분들은 안계셨다,, 빙빙 돌아왔지만 어쨌든 해결했으니깐! 혹시혹시 나와 같은 도움이 필요하신 분도 있을 거 같아서!

 

따로 툴을 사용하지 않고, 이미지 슬라이드를 직접 구현했다. 완성한 화면은 아래와같다.

결과 화면 1

결과 화면 2

 

 

슬라이드 바를 사용해서도 원하는 이미지를 볼 수 있고, 좌우 버튼을 클릭하여 원하는 이미지를 볼 수 있다. 

그리고 반응형으로 개발하여 화면 크기가 줄어들면 그에 따라 화면에 보이는 최대 이미지 개수도 달라진다.

 

 

 

코드 및 설명

---

const imgSrcList = ['url', 'url', 'url', 'url', 'url', 'url'];
const ref = useRef<HTMLDivElement>(null);

// return 코드
<div>
  <button onClick={prevButton} className="text-[200%] w-[5%]">
    &lt;
  </button>
  <div ref={ref} className="flex flex-row overflow-scroll">
    {imgSrcList.map((el, index) => (
      <img
        key={index}
        src={el}
        // 기본값 50, sm, md, lg에 따라 사진 비율 변경
        className="aspect-square px-[1%] w-[50%] sm:w-[38%] md:w-[30%] lg:w-[18%]"
      />
    ))}
  </div>
  <button onClick={nextButton} className="text-[200%] w-[5%]">
    &gt;
  </button>
</div>;

이미지들이 들어있는 박스는 <div>이고, 각각의 <button>은 <div> 밖에 위치시켰다. 각종 css적인 요소들은 배제하고 확인해야 하는 것은 이미지들을 감싸고 있는 <div>에게 준 ref 속성이다. 해당 <div>에게 scroll바를 생성했고, 버튼이 클릭될 때마다 scroll바 위치를 이동시켜야 하기 때문에 useRef를 사용해여 <div>가 선택될 수 있도록 했다.

 

useRef는 특정 DOM을 선택해야할 때 사용한다. 예를 들어 특정 엘리먼트 크기를 가져와야 한다던지, 지금처럼 스크롤바 위치를 가져오거나 설정해줘야 된다던지, 포커스를 설정해줘야 된다던지 상황은 다양하게 있다. 

 

img의 className으로 기본 width, 화면 크기별(sm, md, lg)로 다른 width를 주어 화면 크기에 따라 이미지 크기가 달라지게끔 설정했다. 화면 크기별에 대한 자세한 설명은 tailwind css 공식문서를 살펴보면 된다. 

728x90

반응형

 

 

 

const prevButton = () => {
  if (ref.current) ref.current.scrollLeft += -200;
};
const nextButton = () => {
  if (ref.current) ref.current.scrollLeft += 200;
};

그리고 버튼에게 부여한 onClick이벤트 함수 코드를 작성했다. 버튼이 클릭될 때마다 ref.current.scrollLeft(가로 슬라이드) 값이 오른쪽으로 200px 또는 왼쪽으로 200px씩 이동될 수 있도록 했다. 이때, 클릭 이벤트가 일어나기 전까지 ref.current는 null이기 때문에 ref.current가 있을 때 해당 이벤트가 발생할 수 있도록 if문을 사용하여 ref.current 값이 있는지 먼저 확인해줘야 한다. 안 그러면 타입스크립트가 빼액 거릴 것이다. 만약 사용하고 있다면

 

 

 

느낀점

---

항상 막상 구현을 완성하고 나면 이 쉬운걸!이라는 생각이 들지만, 나중에 내가 또 100% 기억하고 있기란 힘들기 때문에,, 반응형도 구축해보고, 스크롤바에 대해서도 많이 찾아보게 되어 만족스러운 시간이였다. 

 

 

 

 

 

참고자료

---

• https://react.vlpt.us/basic/10-useRef.html
• tailwind css 공식문서

 

 

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖