[swiper, aos]자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (2)

안녕하세요. 바로 이어서 자바스크립트코드를 리액트로 마이그레이션 하는 작업 두번째 시작하겠습니다.

 

전에 첫번째를 못보신 분들은 이작업을 진행하는 이유와 헤더에 대한 부분이 있으니 링크 추가하겠습니다.

https://rhgustmfrh.tistory.com/92

자바스크립트 (js) 코드 리액트 (react) 로 마이그레이션하기 (1)

 

 

import React, { useEffect, useState } from "react";
import AOS from "aos";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Autoplay } from "swiper";
import "aos/dist/aos.css";

SwiperCore.use([Autoplay]);

const Content1: React.FC = () => {
  useEffect(() => {
    AOS.init();
  }, []);

  const [swiperInstance, setSwiperInstance] = useState<SwiperCore | undefined>(
    undefined
  );

  const handleSwiperInstance = (swiper: any) => {
    setSwiperInstance(swiper);
  };

  const handleNextClick = () => {
    if (swiperInstance) {
      swiperInstance.slideNext();
    }
  };

  const handlePrevClick = () => {
    if (swiperInstance) {
      swiperInstance.slidePrev();
    }
  };

  return (
    <div className="cont1">
      <Swiper
        loop={true}
        autoplay={{
          delay: 3000,
          disableOnInteraction: false
        }}
        speed={600}
        onSwiper={handleSwiperInstance}
        className="slideWrap"
      >
        {/* <!-- Additional required wrapper --> */}
        <div className="swiper-wrapper">
          {/* <!-- Slides --> */}
          <SwiperSlide className="s1">
            <div className="slide-context">
              <h2 data-aos="fade-down" data-aos-duration="1000">
                AI 갤러리 인공지능 그리고 예술
              </h2>
              <p data-aos="fade-down" data-aos-duration="1000">
                인공지능을 이용하여 발현되는 다양한 상상력과 재능<br></br>AI를
                사용한 예술이란 무엇인가?
              </p>
              <div
                data-aos="fade-up"
                data-aos-duration="1000"
                className="contextBtns"
              >
                <a className="moreBtn" href="/menu/landscape">
                  더 찾아보기
                </a>
              </div>
            </div>
            <i className="fa-solid fa-computer-mouse"></i>
          </SwiperSlide>
          <SwiperSlide className="s2">
            <div className="slide-context">
              <h2>AI 갤러리 인공지능 그리고 예술</h2>
              <p>
                인공지능을 이용하여 발현되는 다양한 상상력과 재능<br></br>AI를
                사용한 예술이란 무엇인가?
              </p>
              <div className="contextBtns">
                <a className="moreBtn" href="/menu/landscape">
                  더 찾아보기
                </a>
              </div>
            </div>
            <i className="fa-solid fa-computer-mouse"></i>
          </SwiperSlide>
          <SwiperSlide className="s3">
            <div className="slide-context">
              <h2>AI 갤러리 인공지능 그리고 예술</h2>
              <p>
                인공지능을 이용하여 발현되는 다양한 상상력과 재능<br></br>AI를
                사용한 예술이란 무엇인가?
              </p>
              <div className="contextBtns">
                <a className="moreBtn" href="/menu/landscape">
                  더 찾아보기
                </a>
              </div>
            </div>
            <i className="fa-solid fa-computer-mouse"></i>
          </SwiperSlide>
        </div>
        {/* <!-- If we need pagination --> */}
        {/* <!-- <div className="circleBtn"></div> --> */}

        {/* <!-- If we need navigation buttons --> */}
        <div className="prevBtn naviBtn" onClick={handlePrevClick}>
          <i className="fa-solid fa-angle-left"></i>
        </div>
        <div className="nextBtn naviBtn" onClick={handleNextClick}>
          <i className="fa-solid fa-angle-right"></i>
        </div>
      </Swiper>
    </div>
  );
};

export default Content1;

 

해당 컴포넌트는 슬라이드 기능과 문자열의 효과를 주는 swiper,aos 라이브러리를 추가한 것입니다. 기존 자바스크립트에 비해

 

코드가 훨씬 간결해졌습니다.

 

큰제목이 위에서 떨어지는 효과와, 슬라이드가 오른쪽 왼쪽으로 움직이며 자동 재생되는 기능등을 추가하였습니다.

 

감사합니다.