어떻게 React 연결기를 사용하여 전체 화면 슬라이더를 구축합니까

이 강좌에서, 우리는 React 연결을 사용하여 전체 화면 슬라이더 구성 요소를 구축할 것이다.
이를 위해, 우리는 모든 논리를 처리하기 위해 사용자 정의 갈고리를 만들고, 이를 슬라이드를 표시하는 보조 방법으로 사용할 것이다.
그래서 응용 프로그램의 외관을 기획하는 것부터 시작합시다.
최초 출시 시점my blog

Plan our app

Creating the custom hook

Display the slider

어플리케이션 계획

이렇게 하려면 터미널에서 다음 명령을 실행하여 새로운 React 애플리케이션을 만들어야 합니다.

npx create-react-app react-fullscreen-slider

그런 다음 다음과 같이 프로젝트를 구성합니다.

├── App.js
├── App.test.js
├── components
|  └── Slider.js
├── hooks
|  └── useSlider.js
├── images.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

보시다시피 폴더 구조는 매우 간단합니다.우리는 components 폴더가 하나 있는데, 그 중에는 Slider.js라는 파일이 저장되어 있고, 다른 폴더hooks는 사용자 정의 연결useSlider와 슬라이더에 표시할 그림이 포함된 images.js 파일이 하나 더 있다.
이제 이 파일들에 코드 줄을 추가합시다.

images.js

export default [
    {
     src: 'https://drive.google.com/uc?id=1_oA9Sx4D4DhFrYBFQdL0I1CUIz_LhQue',
     text: 'Duis aute irure dolor in reprehenderit in voluptate velit esse'
    },
    {
     src: 'https://drive.google.com/uc?id=1rJFs-8So16UCiDag__hG4yyf_RnC08Fa',
     text: 'Consectetur adipisicing elit cillum dolore eu fugiat nulla'
    },
    {
     src: 'https://drive.google.com/uc?id=1HO2AGjd_1yyYI4pYTTBmGXBaWHoGSqCl',
     text: 'Asperiores ex animi explicabo cillum dolore eu fugiat nulla'
    }
]

내가 전에 말한 바와 같이, 이 파일은 이 그림들을 저장했다.모든 물체는 하나의 이미지와 묘사가 있다.겸사겸사 한마디 하자면, 너는 다른 방법으로 너의 그림을 성명할 수 있다. 이것은 완전히 너에게 달려 있다.
슬라이더의 논리를 처리하기 위해 사용자 정의 연결을 구축할 때가 되었다.
우리 갑시다.

사용자 정의 연결 만들기

useSlider 함수는 슬라이드의 이미지, 설명, 이미지 그룹 세 개의 매개 변수를 수신합니다.

hooks/useSlider.js

import { useEffect } from 'react'

const useSlider = (slideImage, slideText, images) => {
 let slideCounter = 0;

 useEffect(() => startSlider())

 const startSlider =() => {
    slideImage.current.style.backgroundImage = `linear-gradient(
        to right,
        rgba(34, 34, 34, 0.4),
        rgba(68, 68, 68, 0.4)
        ), url(${images[0].src})`;
        slideText.current.innerHTML = images[0].text;
}

이 매개 변수가 있으면, 우리는 현재 새 함수 startSlider() 를 만들고, 페이지가 불러온 후에 표시할 첫 번째 슬라이드를 처리할 수 있습니다.
나중에 useRef를 사용하여 요소를 선택하고 DOM(문서 객체 모델)을 조작할 수 있습니다.그러나 지금은 slideImage와 slideText가 DOM 요소에 대한 인용이라는 것을 기억하세요.
이제 이러한 요소의 속성에 액세스하여 스타일 설정을 시작할 수 있습니다.여기서 우리는 이미지에 선형 그래디언트를 적용하여 보기 좋은 스타일을 얻은 다음에 해당하는 텍스트를 DOM에 추가합니다.

hooks/useSlider.js

const handleSlide = (slide) => {
 slideImage.current.style.backgroundImage = `linear-gradient(
    to right,
    rgba(34, 34, 34, 0.4),
    rgba(68, 68, 68, 0.4)
    ), url(${images[slide - 1].src})`;
    slideText.current.innerHTML = images[slide - 1].text;
    animateSlide(slideImage)
}

const animateSlide = () => {
 slideImage.current.classList.add('fadeIn');
  setTimeout(() => {
    slideImage.current.classList.remove('fadeIn');
  }, 700);
}

다음에 우리는 함수handleSlide()에 대해 같은 방법을 사용하여 이미지에 선형 사다리를 적용한다.하지만 이번에는 슬라이드나 카운터의 번호를 매개 변수로 받아서 화면에 해당하는 슬라이드를 보여 줍니다.
다음에 우리는 animateSlide() 방법을 사용하여 좋은 페이드 효과로 애니메이션을 설정합니다.

hooks/useSlider.js

const goToPreviousSlide = () => {
  if (slideCounter === 0) {
    handleSlide(images.length)
    slideCounter = images.length;
  }

    handleSlide(slideCounter)         
    slideCounter--;
  }

const goToNextSlide = () => {
  if (slideCounter === images.length - 1) {
    startSlider()
    slideCounter = -1;
    animateSlide(slideImage)
  }

 slideImage.current.style.backgroundImage = `linear-gradient(
        to right,
        rgba(34, 34, 34, 0.4),
        rgba(68, 68, 68, 0.4)
        ),url(${images[slideCounter + 1].src})`;
    slideText.current.innerHTML = images[slideCounter + 1].text;
    slideCounter++;
      animateSlide(slideImage)
}

return { goToPreviousSlide, goToNextSlide }
}

export default useSlider

보시다시피 여기에는 두 가지 주요 기능이 있습니다: goToPreviousSlide()와goToNextSlide().
첫 번째 방법goToPreviousSlide()은 슬라이더의 계수기가 0과 같은지 검사한다.이렇게 하면 마지막 슬라이드가 표시되고 그렇지 않으면 이전 슬라이드가 표시됩니다.
두 번째 방법의 효과는 정반대다.슬라이드 카운터가 마지막 슬라이드와 같은지 확인합니다. 만약 그렇다면 슬라이더를 다시 시작합니다. 그렇지 않으면 goToNextSlide() 방법은 다음 슬라이드를 표시합니다.
다른 파일에서 모든 내용을 접근하기 위해서, 우리는 goToPreviousSlide() 과 goToNextSlide() 을 포함하는 대상을 되돌려야 한다.
그럼에도 불구하고, 우리는 이제 마지막 부분으로 이동하고, 사용자 정의 연결을 사용하여 다음 절에 슬라이더를 표시할 수 있다.

슬라이더 보이기

우리는 이미 슬라이드를 보여주는 논리가 있는데, 현재 유일하게 해야 할 일은 Slider.js 슬라이드를 보여주는 것이다.

Slider.js

import React, { useRef } from 'react';
import useSlider from '../hooks/useSlider'

const Slider = ({images}) => {

  const slideImage = useRef(null)
  const slideText = useRef(null)
  const { goToPreviousSlide, goToNextSlide } = useSlider(slideImage, slideText, images)

  return (
    <div className="slider" ref={slideImage}>
      <div className="slider--content">
        <button onClick={goToPreviousSlide} className="slider__btn-left">
        <i className="fas fa-angle-left"></i>
        </button>
        <div className="slider--feature">
          <h1 className="feature--title">Dreaming</h1>
          <p ref={slideText} className="feature--text"></p>
          <button className="feature__btn">Get started</button>
        </div>
        <button onClick={goToNextSlide} className="slider__btn-right">
        <i className="fas fa-angle-right"></i>
        </button>
     </div>
    </div>
    );
}

export default Slider;

나는 그것을 언급하는 것을 잊었지만, 본고는 CSS 부분을 토론하지 않을 것입니다. Source Code 에서 그것을 찾을 수 있습니다.그러니 이런 종류의 이름이 너를 방해하지 않도록 해라.Slider() 함수는 상대적으로 실현하기 쉽다. 왜냐하면 우리는 이미 useSlider가 있기 때문이다.
우리가 유일하게 해야 할 일은 가져오기 useSlider, 그리고 당기기 goToPreviousSlide() 와 goToNextSlide() 이다. 매개 변수를 매개 변수로 함수에 전달하는 것을 잊지 마라.
앞서 말했듯이 DOM 요소에 액세스하려면 useRef를 사용해야 합니다.
이 변경 사항이 있으면 App.js 파일의 슬라이더 구성 요소를 사용하고 그림 그룹을 도구로 전달할 수 있습니다.

App.js

import React from 'react';
import Slider from './components/Slider'
import Images from './images'

function App() {
  return (
    <Slider images={Images}  />
  );
}

export default App;

보시다시피 슬라이더 구성 요소에 도구로 가져오기 Images 만 하면 됩니다.
이 작은 업데이트를 통해, 우리는 이미 React 갈고리를 사용하여 전체 화면 슬라이더 구성 요소를 구축했다.

읽어주셔서 감사합니다!
원본 코드를 찾을 수 있습니다 here
BLOG
NEWSLETTER
GITHUB
CODEPEN