[React] 라이브러리 없이 이미지 슬라이더 만드는 방법 1

리액트로 이미지 슬라이더를 만들어 봅시다.

라이브러리를 사용하지 않고 순수 자바스크립트로 구현해보겠습니다.

 

만드는 방법은 2가지가 있습니다.

1. position: absolute와 opacity를 이용하는 방법

2. tranform: translateX를 이용하는 방법

 

1번 방법은 position: absolute로 이미지를 겹쳐 놓은 상태에서

opacity를 이용하여 맨 위에 보여지는 이미지를 바꾸는 방법입니다.

간편한 방법이지만 이미지가 옆으로 스윽- 이동하는 효과는 낼 수 없습니다.

 

2번 방법은 이미지가 옆으로 이동하는 효과는 낼 수 있지만

마지막 슬라이드에서 다음 슬라이드(맨 처음 슬라이드)로 이동할 때

왔던 길을 다시 되돌아 가야 합니다.

 

이번 글에서는 1번 방법으로 이미지 슬라이더를 만들어보고,

2번 방법은 다음 글에서 다뤄보도록 하겠습니다.

 

1번 방법(position: absolute, opacity)으로 구현

 

---

absolute와 z-index를 사용하여 이미지 슬라이더 만들기

※ CSS는 styled-components 라이브러리를 사용했습니다.

 

1. useState로 맨 위에 보여질 슬라이드 번호 지정

function Slider() {
  const [slideIndex, setSlideIndex] = useState(1);

먼저 useState를 이용하여 slideIndex라는 state를 만들어줍니다.

맨 위에 보여질 이미지 슬라이드의 번호를 나타내는 state입니다.

dummy 데이터의 id를 1부터 지정했기 때문에 초기값을 1로 해주었습니다.

 

2. 슬라이드 나열, 이동 버튼 생성

  return (
    <Container>
      <Arrow direction="prev">이전</Arrow>
      {data.map((character) => (
        <Slide
          key={character.id}
          className={character.id === slideIndex ? "active" : null}
        >
          <Photo
            src={process.env.PUBLIC_URL + `/img/slider/${character.img}`}
          />
          <Name>{character.name}</Name>
          <Nickname>{character.nickname}</Nickname>
        </Slide>
      ))}
      <Arrow direction="next">다음</Arrow>
    </Container>
  );
}

이미지 슬라이드를 담을 Container를 만들어주고,

그 안에 map 메서드를 통해 Slide를 나열해줍니다.

 

슬라이드의 id와 slideIndex가 같은 경우에는 (맨 위에 보여질 슬라이드)

Slide 컴포넌트에 active 라는 클래스를 부여해줍니다.

 

슬라이드 이동 버튼도 만들어 줍니다.

Container 안에 Arrow 라는 컴포넌트를 만들어 Slide 위 아래 배치하였습니다.

버튼 방향에 따라 css 속성을 달리 해야 하기 때문에 props로 direction을 전달해주었습니다.

 

3. CSS 속성 지정

const Container = styled.div`
// Container 크기 지정
  width: 400px;
  height: 400px;
  
// 윗 여백 지정, Container 컴포넌트 가운데 정렬
  margin: 200px auto;
  
// Container 내부 가운데 정렬
  display: flex;
  justify-content: center;
  align-items: center;
  
// position: absolute인 Arrow, Slide 컴포넌트를 배치하기 위해
  position: relative;
`;

const Arrow = styled.button`
// Container 컴포넌트 기준으로 배치
  position: absolute;
  
// 수직 가운데 정렬
  top: 0;
  bottom: 0;
  margin: auto 0;
  
// Prev 버튼인 경우 left: 0, Next 버튼인 경우 right: 0
  left: ${({ direction }) => direction === "prev" && "0px"};
  right: ${({ direction }) => direction === "next" && "0px"};
  
// 크기, 스타일 지정
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: pink;

// Prev 버튼이 Slide 컴포넌트에 가려지지 않기 위해 z-index 지정 
  z-index: 1;
`;

const Slide = styled.div`
// Container 컴포넌트 기준으로 배치
  position: absolute;

// Slide 내부 가운데 정렬, 갭 지정
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;

// ★★ 기본적으로 opacity를 0으로 하여 안보이게 하고,
// active 클래스를 통해 opacity를 1로 바꿔 보이게 함
  opacity: 0;
  &.active {
    opacity: 1;
  }
  
// opacity에 트랜지션 적용
  transition: opacity 0.3s ease-in-out;
`;

const Photo = styled.img``;

const Name = styled.div``;

const Nickname = styled.div``;

 

Slide 컴포넌트를 absolute로 포지셔닝 하여

이미지 슬라이드가 겹쳐 쌓이도록 만들어줍니다.

 

 

▼ absolute 포지셔닝 전, 일렬로 나열되었던 이미지들이...

 

▼ absolute 포지셔닝 후 겹쳐진 모습

 

opacity를 0으로 지정하여 모두 안보이게 만들어 줍니다.

슬라이드 id와 slideIndex가 일치하는 경우에는

active 클래스를 통해 opacity가 1이 적용되므로 화면 상에 나타나게 됩니다.

 

useState의 초기값이 1이므로 첫번째 이미지가 화면에 나타납니다.

 

▼ opacity 조절 후 모습

 

4. 이전, 다음 버튼 클릭 함수 만들기

이전, 다음 버튼 클릭 시 실행될 함수를 만들어주고

onClick 이벤트에 해당 함수를 달아주었습니다.

  const moveToPrevSlide = () => {
    if (slideIndex !== 1) {
      setSlideIndex((prev) => prev - 1);
    } else {
      setSlideIndex(data.length);
    }
  };

  const moveToNextSlide = () => {
    if (slideIndex !== data.length) {
      setSlideIndex((prev) => prev + 1);
    } else {
      setSlideIndex(1);
    }
  };
  
 
 <Arrow direction="prev" onClick={moveToPrevSlide}>
 <Arrow direction="next" onClick={moveToNextSlide}>

먼저 이전 버튼 클릭 함수입니다.

기본적으로, 이전 버튼 클릭시 slideIndex를 1씩 줄이되,

첫번째 슬라이드인 경우, 이전 이미지가 없으므로 맨 마지막 슬라이드로 이동하게 됩니다.

 

if/else문과 setSlideIndex를 이용하여

slideIndex가 1이 아닌 경우(첫번째 슬라이드가 아닌 경우) slideIndex를 1씩 줄이고,

slideIndex가 1인 경우(첫번째 슬라이드인 경우) 맨 마지막 슬라이드 번호(=배열 길이)로 바꿔줍니다.

 

다음 버튼 클릭 함수도 로직은 동일합니다.

기본적으로 slideIndex를 1씩 증가시키되,

맨 마지막 슬라이드만 다음 버튼 클릭시 slideIndex를 1로 바꿔줍니다.

 

▼ 버튼 클릭 시 이미지가 바뀌는 모습

 

5. 페이지네이션 구현하기

const moveDot = (index) => {
    setSlideIndex(index);
  };
 
 <DotContainer>
        {data.map((character) => (
          <Dot
            key={character.id}
            className={character.id === slideIndex ? "active" : null}
            onClick={() => moveDot(character.id)}
          />
        ))}
 </DotContainer>

페이지네이션 버튼을 담을 DotContainer를 만들어 주고,

이미지 슬라이드를 나열했던 것처럼 Dot도 나열해줍니다.

마찬가지로, id와 현재 slideIndex가 같은 경우 active라는 클래스를 달아줍니다.

 

Dot을 클릭하면 현재 id를 인자로 담아 moveDot 함수로 전달하여

slideIndex를 바꿔줍니다. 그럼 해당 번호에 맞는 이미지 슬라이드로 바뀌게 됩니다.

 

const DotContainer = styled.div`
// Container 컴포넌트 기준으로 맨 아래 배치
  position: absolute;
  bottom: 0;
  
// 너비 지정
  width: 150px;
  
// Dot 배치
  display: flex;
  justify-content: space-between;
`;

const Dot = styled.div`
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: pink;
  cursor: pointer;
  
// 현재 슬라이드를 나타내는 Dot은 배경색을 다르게 설정
  &.active {
    background-color: skyblue;
  }
`;

DotContainer도 position: absolute 속성을 통해 Container 맨 아래 쪽에 배치해줍니다.

Dot 컴포넌트에서는 active 클래스를 통해 현재 활성화된 Dot만 배경색을 다르게 설정해줍니다.

 

여기까지 하면 완성입니다^^

 

 

전체 코드

import { useState } from "react";
import styled from "styled-components";
import data from "./data";

function Slider() {
  const [slideIndex, setSlideIndex] = useState(1);

  const moveToPrevSlide = () => {
    if (slideIndex !== 1) {
      setSlideIndex((prev) => prev - 1);
    } else {
      setSlideIndex(data.length);
    }
  };

  const moveToNextSlide = () => {
    if (slideIndex !== data.length) {
      setSlideIndex((prev) => prev + 1);
    } else {
      setSlideIndex(1);
    }
  };

  const moveDot = (index) => {
    setSlideIndex(index);
  };

  return (
    <Container>
      <Arrow direction="prev" onClick={moveToPrevSlide}>
        이전
      </Arrow>
      {data.map((character) => (
        <Slide
          key={character.id}
          className={character.id === slideIndex ? "active" : null}
        >
          <Photo
            src={process.env.PUBLIC_URL + `/img/slider/${character.img}`}
          />
          <Name>{character.name}</Name>
          <Nickname>{character.nickname}</Nickname>
        </Slide>
      ))}
      <Arrow direction="next" onClick={moveToNextSlide}>
        다음
      </Arrow>
      <DotContainer>
        {data.map((character) => (
          <Dot
            key={character.id}
            className={character.id === slideIndex ? "active" : null}
            onClick={() => moveDot(character.id)}
          />
        ))}
      </DotContainer>
    </Container>
  );
}

export default Slider;

const Container = styled.div`
  width: 400px;
  height: 400px;
  margin: 200px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
`;

const Arrow = styled.button`
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: ${({ direction }) => direction === "prev" && "0px"};
  right: ${({ direction }) => direction === "next" && "0px"};
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: pink;
  z-index: 1;
`;

const Slide = styled.div`
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  &.active {
    opacity: 1;
  }
`;

const Photo = styled.img``;

const Name = styled.div``;

const Nickname = styled.div``;

const DotContainer = styled.div`
  position: absolute;
  bottom: 0;
  width: 150px;
  display: flex;
  justify-content: space-between;
`;

const Dot = styled.div`
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: pink;
  cursor: pointer;
  &.active {
    background-color: skyblue;
  }
`;

// data.js

const data = [
  {
    id: 1,
    name: "우영우",
    nickname: "천재 변호사",
    img: "youngwoo.jpg",
  },
  {
    id: 2,
    name: "이준호",
    nickname: "섭섭한데요",
    img: "junho.jpg",
  },
  {
    id: 3,
    name: "정명석",
    nickname: "유니콘 상사",
    img: "myeongseok.jpg",
  },
  {
    id: 4,
    name: "최수연",
    nickname: "봄날의 햇살",
    img: "suyeon.jpg",
  },
  {
    id: 5,
    name: "권민우",
    nickname: "권모술수",
    img: "minwoo.jpg",
  },
];

export default data;