리액트로 슬라이드 만들기 + typescript

이번 팀플에서 맡은 페이지에 슬라이드 파티가 시작됐다. 

전부 라이브러리 없이 구현하려니 신나네?(정말... 신나..)

어쨌든.. 그렇게 시작된 리액트로 슬라이드 만들기

시작합니도~

 

슬라이드 만들기지만 정말 별 기능이 없는 간단한 슬라이드이다.

 

근데 이건 뭔가 슬라이드 느낌이 나지 않아서 곧 옆으로 넘어가는 슬라이드로 다시 작업할 예정이지만, 첫 슬라이드 작업이라서 기록에 남겨본다.

 

fade 되는 슬라이드를 구현하려 했지만, 지금은 display block/none으로 동작하는 슬라이드이다.

곧.. fade도 도전!

 

생각한 로직

1. useState를 만들어서 현재 슬라이드의 index 관리
2. 다음 버튼을 누르면 state + 1, 이전 버튼을 누르면 state - 1을 해서 배너의 index와 state 값이 같으면 배너 노출
3. 만약 첫 번째 배너면 이전 버튼 미노출
4. 만약 마지막 배너면 다음 버튼 미노출

 

작업 설명

1. 현재 슬라이드의 index를 담을 state를 만든다.

const [slide, setSlide] = useState(0);

 

 

2. 이전 버튼을 누르면 -1, 다음 버튼을 누르면 + 1

  const onClickPrevHandler = () => {
    setSlide((prev) => prev - 1);
  };

  const onClickNextHandler = () => {
    setSlide((prev) => prev + 1);
  };

 

 

렌더링 되는 부분 코드

 

슬라이드 요소 - className에서 ${slide === idx ? "block" : "hidden"}

slide state와 idx 값이 같으면 tailwind css block으로 요소를 노출하고 아니면 hiddne으로 미노출시킨다.

  return (
    <div>
        <div className="relative m-4">
          <ul className={`flex overflow-hidden transition-all`}>
            {data?.[0].imageUrl.map((item, idx) => {
              const splitUrl = item.split("/");

              return (
                <li key={splitUrl[splitUrl.length - 1]} className={`w-full [&_img]:w-full [&_img]:h-auto transition-opacity ${slide === idx ? "block" : "hidden"}`}>
                  <Image src={item} width={1600} height={300} alt={`배너 이미지 ${idx}`} />
                </li>
              );
            })}
          </ul>
          <div>
            <button type="button" className={`absolute left-0 top-1/2 -translate-y-1/2 ${slide === 0 ? "hidden" : "block"}`} onClick={onClickPrevHandler}>
              PREV
            </button>
            <button type="button" className={`absolute right-0 top-1/2 -translate-y-1/2 ${slide < data?.[0].imageUrl.length - 1 ? "block" : "hidden"}`} onClick={onClickNextHandler}>
              NEXT
            </button>
          </div>
        </div>
    </div>
  );

 

 

결과 화면

 

아직 css를 하나도 잡지 않아서 볼품이 없지만... 구현은 완료했다. 

 

이후에 할 일

• 왼쪽으로 넘어가는 슬라이드 구현하기
• fade 느낌 나는 슬라이드 구현하기

 

느낀 점

간단한 기능만 있음에도 만드는데 좀 걸렸다....

뭔가 괜히 리액트로 하려니까 더 어렵게 느껴지는 기분... 뭔가 렌더링에 집중해서 그런가... 

 

지금 이 글을 쓰고 있는 지금은 왼쪽으로 넘어가는 슬라이드를 만드는 중이다. 

이것도 얼른 완성하고 싶다. 

 

 

리액트로 슬라이드 만들기 2탄

2024.04.04 - [TIL] - 리액트로 슬라이드 만들기 2 + typescript