[React] 이미지

by

이미지 슬라이드를 생성한 코드를 남겨두겠습니다. 인터넷에 많이 찾아봤지만 저와 똑같이 구현한 숙련된 개발자는 없었습니다. 계속 돌려봤지만 그래도 해결했습니다! 저처럼 도움이 필요한 분들이 계시리라 믿습니다!

별도의 도구를 사용하지 않고 이미지 슬라이드를 직접 구현했습니다. 완성된 화면은 다음과 같습니다.


결과 화면 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>;

사진이 있는 상자는

그리고 여러분