[React] 클릭 슬라이드 구현하기

◀ 왼쪽 화살표 클릭하면 왼쪽 이미지로 넘어가고
▶ 오른쪽 화살표 클릭하면 오른쪽 이미지가 보임 ( 울라울라🎶 )

👊코드를 보자잇

App.js

// React와 useState 훅을 임포트
import React, { useState } from 'react'; 
// CSS 파일을 임포트하여 스타일을 적용
import './App.css';

function App() {
  // 현재 슬라이드의 인덱스를 상태로 관리 (초기값은 0)
  const [currentIndex, setCurrentIndex] = useState(0);
  
  // 표시할 이미지 목록을 배열로 저장
  const images = [
    "https://mblogthumb-phinf.pstatic.net/MjAxODA2MjRfMjc0/MDAxNTI5ODMyNDMyNTUw.UjLK3CNxdKLX12w9AP7Qe1chiVQMDGvZ7pxga872kf4g.yaDiFi9-PLb5WVIkOIvtYXo9OKf_6OPJUzQcCvMnKM8g.JPEG.amykims/7.jpg?type=w800",
    "https://mblogthumb-phinf.pstatic.net/MjAxODAyMDFfOTMg/MDAxNTE3NDE2MDQ4OTg5.y_dGPnx95Ej1eNF7lmSuyKdpABdO4ruvwIuBuPdrP9cg.c3wbGgVOVnUHmFhytilQ_TC0IYIPooWUP8sOSkDWO1Qg.JPEG.wecho94/%EC%A7%B1%EA%B5%AC11.jpg?type=w800",
    "https://mblogthumb-phinf.pstatic.net/MjAxODAyMDFfNyAg/MDAxNTE3NDE2MDQ4NjM2.Ys-3YlFoJdt2_hYmbbBbP9gxWRvUIJqIGuzwsLXKio4g.TjwQz86RhZQN37wQ_oKCuJI7IY7fzc2XyuU5YIWneJkg.JPEG.wecho94/%EC%A7%B1%EA%B5%AC1.jpg?type=w800",
  ];
  
  // 왼쪽 화살표 클릭 시 이전 이미지로 이동하는 함수
  const goToPreviousSlide = () => {
    // 현재 인덱스가 0이면 마지막 이미지로, 아니면 이전 이미지로 이동
    setCurrentIndex((prevIndex) =>
      prevIndex === 0 ? images.length - 1 : prevIndex - 1
    );
  };
  
  // 오른쪽 화살표 클릭 시 다음 이미지로 이동하는 함수
  const goToNextSlide = () => {
    // 현재 인덱스가 마지막이면 첫 번째 이미지로, 아니면 다음 이미지로 이동
    setCurrentIndex((prevIndex) =>
      prevIndex === images.length - 1 ? 0 : prevIndex + 1
    );
  };
  
  return (
    {/* 중앙 정렬된 슬라이드 쇼 전체 컨테이너 */}
  	<div className="App"> 
      {/* 슬라이드 쇼 영역을 정의하는 컨테이너 */}
      <div className="slider-container">
        {/* 현재 인덱스의 이미지를 표시 */}
         <img 
          // 현재 이미지의 URL을 src 속성으로 설정
          src={images[currentIndex]}
          // 접근성 개선을 위한 alt 텍스트 설정
          // currentIndex가 0이면 'Slide 1'이, 1이면 'Slide 2'가 표시
          alt={`Slide ${currentIndex + 1}`}
          // 이미지 스타일을 위한 클래스
          className="slide-image"  
        />
        
        {/* 왼쪽 화살표 버튼 */}
        <button className="arrow left" onClick={goToPreviousSlide}>
          &#9664; {/* 왼쪽 화살표 기호 */}
        </button>
        
        {/* 오른쪽 화살표 버튼 */}
        <button className="arrow right" onClick={goToNextSlide}>
          &#9654; {/* 오른쪽 화살표 기호 */}
        </button>
      </div>
    </div>
  );
}
// App 컴포넌트를 내보내 다른 파일에서 사용할 수 있게함
export default App;

App.css

.App {
  display: flex; /* 세로축과 가로축 중앙 정렬을 위해 flex 사용 */
  justify-content: center; /* 가로축 중앙 정렬 */
  align-items: center; /* 세로축 중앙 정렬 */
  height: 100vh; /* 화면 전체 높이 설정 */
}

.slider-container {
  position: relative; /* 화살표 버튼 위치 조정을 위해 relative 사용 */
  width: 600px; /* 슬라이드 쇼 넓이 */
  height: 300px; /* 슬라이드 쇼 높이 */
}

.slide-image {
  width: 100%; /* 이미지가 컨테이너 가로폭을 채우도록 설정 */
  height: 100%; /* 이미지가 컨테이너 세로폭을 채우도록 설정 */
  object-fit: cover; /* 이미지가 영역을 덮도록 비율을 맞춤 */
}

/* 화살표 버튼 스타일 */
.arrow {
  position: absolute; /* 버튼을 이미지 위에 배치 */
  top: 50%; /* 버튼을 세로 중앙에 위치 */
  transform: translateY(-50%); /* 버튼을 정확히 중앙에 맞추기 위해 이동 */
  font-size: 2rem; /* 화살표 크기 설정 */
  color: #333; /* 화살표 색상 */
  background: none; /* 버튼 배경 제거 */
  border: none; /* 버튼 테두리 제거 */
  cursor: pointer; /* 마우스를 올렸을 때 클릭 가능하도록 포인터 표시 */
  padding: 0 10px; /* 좌우 간격 추가 */
}

.left {
  left: 10px; /* 왼쪽 화살표 위치 설정 */
}

.right {
  right: 10px; /* 오른쪽 화살표 위치 설정 */
}

.arrow:hover {
  color: #000; /* 버튼에 마우스를 올리면 색상 진하게 변경 */
}