React에서 1분도 안 되는 스냅 스크롤

동기 부여:

우리는 모두 한 섹션에서 다른 섹션으로 스냅 스크롤을 사용하는 웹 사이트를 본 적이 있습니다. 전통적으로 CSS에서 애니메이션을 수행하고 react-use-scroll-snap의 도움을 받아 1분 안에 이를 달성하기 위해 많은 스타일을 작성할 수 있습니다.

설치:

새로운 react 앱을 생성하고 react-use-scroll-snap를 설치하기만 하면 됩니다.

npx create-react-app test-app
yarn add react-use-scroll-snap

용법:

useScrollSnap 후크를 가져오고 구성 요소의 참조를 전달합니다.
나는 기본 반응 앱 복제 헤더를 사용하고 있으며 단순성을 위해 페이지 이름만 변경하면 구성 요소를 사용할 수 있습니다.

import { useRef } from "react";
import useScrollSnap from "react-use-scroll-snap";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const scrollRef = useRef(null);
  useScrollSnap({ ref: scrollRef, duration: 50, delay: 20 });
  return (
    <div className="App" ref={scrollRef}>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Page 1</p>
      </header>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>page 2</p>
      </header>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Page 3</p>
      </header>
    </div>
  );
}

export default App;

그게 우리 앱에 스냅 스크롤이 있다는 것입니다. 이 게시물은 scroll-snap Cheers를 사용하여 Vanilla JS에 대해 동일한 작업을 수행할 수 있는 반응에 중점을 둡니다.