갈고리는 React에서 구성 요소를 작성하고 유지할 때 겪는 여러 가지 문제를 해결했다.React를 배우고 있든지, 구성 요소 모델과 비슷한 다른 라이브러리를 사용하는 것을 좋아하든지, 그 중의 몇 가지 문제를 인식할 수 있습니다.
React 갈고리는 구성 요소를 작성하지 않고 React 기능만 사용할 수 있습니다.다시 말하면 갈고리는 기능 구성 요소의 반응 상태와 생명주기 특성을 사용할 수 있는 함수입니다.React와 Node에 대해 직접적으로 알고 있다고 가정하십시오.js.이제 시작합시다.

개시하다

NPM과 노드가 있다면js installed, class 라는 새 폴더에 React 프로젝트를 만들고 디렉터리에 설치합니다 review-slider:

npx create-react-app review-slider 
cd review-slider
# Install react-icons
npm install react-icons

react-icons를 실행하면 브라우저에 확인 메시지가 표시됩니다.

구성 요소 정의

우선 프로젝트의 구조를 두 개의 독립된 구성 요소로 나누어 성능과 유지보수성을 향상시킬 것입니다.

npm start - 슬라이더를 포함하는 바디, 반응 고리 및 슬라이더 버튼

App.js - 슬라이더 내용을 표시하기 위해 데이터 배열의 분해 과정을 포함합니다.

선언 상태 변수

상태 변수People.js를 선언하고 people 파일의 데이터로 설정합니다.슬라이더의 기능에 대해 반드시 색인이 있어야 한다. 단추를 누르면 색인이 바뀐다.이것은 데이터의 인덱스에 또 다른 상태 변수를 설명할 것입니다. 초기 값은 data.js 입니다.
이것이 바로 React Hooks 특성이 작용하는 곳으로 0 는 클래스에서 제공하는 완전히 같은 기능을 사용하는 새로운 방법이다.그것은 함수 호출 사이에 변수의 일부 값을 보존한다.일반적으로 함수가 종료될 때 변수는 사라지지만 상태 변수는 보류됩니다.또 다른 특징은 useState입니다. 우리는 잠시 후에 그것을 응용하여 어떤 형식의 기능을 실현할 것입니다.

//App.js
import React, {useState, useEffect} from 'react';
import data from './data';
function App() {
  const [people, setPeople] = useState(data);
  const [index, setIndex] = useState(0);
  }
  export default App;

우리의 재산을 파괴하다

데이터 목록 렌더링

this.state 함수를 사용하면 우리는 useEffect의 데이터를 교체할 것이다. 그 목적은 그 속성을 분해한 다음에React 구성 요소map()와 도구를 되돌려주는 것이다.

//App.js
function App() {
return (
<section className="section">
<div className="title">
 <h2>reviews</h2>
 <div className="underline"></div>
</div>
<div className="section-center">
  {people.map((person, personIndex) => {
  return <People key={person.id} {...person} personIndex= 
  {personIndex} index={index} />
      })}
    )
  }

슬라이더 내용 표시

data.js 구성 요소는 분해 과정을 포함하는데 그 중에서 데이터People는 그 속성에 접근하는 관건적인 속성이다.다음 그림에서 보듯이 슬라이더의 내용은 데이터 속성에 분배된 변수를 통해 표시됩니다.슬라이더의 CSS 특성 때문에 해당 컨텐트가 서로 스택됩니다.이 점을 바로잡기 위해서, 우리는 People 라는 변수를 만들고, id 를 기본값으로 해야 한다.그런 다음 변수conditional rendering를 사용하여 각 슬라이더의 위치를 조정합니다.

//People.js
import React from 'react';
import { FaQuoteRight } from 'react-icons/fa';
import people from './data';

const People = ({id, image, name, title, quote, personIndex, index}) => {
 let position = "nextSlide";
 if(personIndex === index){
    position = 'activeSlide'
   }
 if(personIndex === index - 1 || (index === 0 && personIndex === people.length - 1)){
    position = 'lastSlide'
   }
  return(
   <article className={position} key={id}>
     <img src={image} alt={name} className="person-img" />
     <h4>{name}</h4>
     <p className="title">{title}</p>
     <p className="text">{quote}</p>
     <FaQuoteRight className="icon" />
   </article>
        );
    }

    export default People;

슬라이딩 버튼

position 어셈블리에서 React icons - "nextSlide" 및 App를 가져와 슬라이더 사이를 탐색합니다.

//App.js
<button className="prev" onClick={() => setIndex(index - 1)}>
<FiChevronLeft />
</button>
<button className="next" onClick={() => setIndex(index + 1)}>
<FiChevronRight />
</button>

위의 코드 세션은 FiChevronLeft 이벤트 처리 프로그램을 사용하는 단추를 보여 줍니다. FiChevronRight 단추는 색인 기본값에 onClick 를 추가하여 다음 슬라이더로 전환합니다. FiChevronRight 단추는 반대입니다.

자동 재생 기능

후크 기능 - 사용 효과

React Hooks 기능 1 은 자동 재생을 허용합니다.FiChevronLeft 기능을 사용하여 슬라이더를 5초 간격으로 설정하면 슬라이더 버튼을 클릭하지 않고 다음 슬라이드로 자동으로 전환됩니다.이를 사용하면 React는 전달한 함수를 기억하고 DOM 업데이트를 실행한 후에 호출합니다.useEffect 기능은 슬라이더 기능도 완성했다. 조건 렌더링은 슬라이더가 마지막 항목에 도달한 후에 그룹의 첫 번째 항목으로 전환할 수 있도록 한다.

useEffect(() => {
  const lastIndex = people.length - 1
    if (index < 0) {
      setIndex(lastIndex)
      }
    if (index > lastIndex){
      setIndex(0)
      }
   }, [index, people])

useEffect(() => {
  let slider = setInterval(() => {
    setIndex(index + 1)
   }, 5000);
    return () => clearInterval(slider)
   }, [index])

비디오 테이프

이것은 사용 중인 슬라이더의 작업 시범이다.

결론

기능 구성 요소를 만드는 데 예전처럼 복잡할 필요가 없습니다.React 갈고리를 사용하면 쉽게 테스트하고 다시 사용할 수 있도록 구성 요소의 상태를 얻을 수 있습니다.그것은 또한 논리를 봉하여 구성 요소의 차원 구조에 영향을 주지 않는다.
본고의 코드 라이브러리를 이해하려면 Github에 방문하여 보십시오.