React에서 보기로 스크롤하는 방법

이 기사에서는 React에서 보기로 스크롤하는 두 가지 방법에 대해 설명합니다.

프로젝트 설정

먼저 다음 명령을 실행하여 반응 프로젝트를 생성합니다.

npx create-react-app react-scroll-into-view

순수 HTML 및 CSS를 사용한 스크롤

다음 스타일로 index.css를 업데이트합니다.

body {
  max-width: 900px;
  margin: 10px auto;
}

.App {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.section {
  height: 100vh;
}

header {
  display: flex;
  justify-content: center;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  position: fixed;
  top: 0;
  background-color: white;
}
li a {
  padding: 1rem;
  text-decoration: none;
}

이제 다음 코드를 사용하여 App.js를 업데이트합니다.

function App() {
  return (
    <div className="App">
      <header>
        <ul>
          <li>
            <a href="#home">Home</a>
          </li>
          <li>
            <a href="#products">Products</a>
          </li>
          <li>
            <a href="#services">Services</a>
          </li>
          <li>
            <a href="#about-us">About Us</a>
          </li>
        </ul>
      </header>
      <div className="section" id="home">
        <h2>Home</h2>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
          Nisi officia, placeat, enim quibusdam nostrum similique atque
          accusantium natus sit molestias minima voluptates eos doloribus illum
          ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
          asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
          Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
          molestiae ipsa nulla! Est aspernatur eius corrupti.
        </p>
      </div>
      <div className="section" id="products">
        <h2>Products</h2>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
          Nisi officia, placeat, enim quibusdam nostrum similique atque
          accusantium natus sit molestias minima voluptates eos doloribus illum
          ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
          asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
          Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
          molestiae ipsa nulla! Est aspernatur eius corrupti.
        </p>
      </div>
      <div className="section" id="services">
        <h2>Services</h2>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
          Nisi officia, placeat, enim quibusdam nostrum similique atque
          accusantium natus sit molestias minima voluptates eos doloribus illum
          ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
          asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
          Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
          molestiae ipsa nulla! Est aspernatur eius corrupti.
        </p>
      </div>
      <div className="section" id="about-us">
        <h2>About Us</h2>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
          Nisi officia, placeat, enim quibusdam nostrum similique atque
          accusantium natus sit molestias minima voluptates eos doloribus illum
          ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
          asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
          Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
          molestiae ipsa nulla! Est aspernatur eius corrupti.
        </p>
      </div>
    </div>
  )
}

export default App

코드에서 볼 수 있듯이 4개의 다른 섹션에 대한 링크가 포함된 헤더가 있습니다. 각 섹션의 ID를 href 속성 값으로 지정했습니다(예: <a href="#products">Products</a> ). 또한 섹션에 높이100vh를 추가하여 화면의 전체 높이를 차지하고 스크롤이 올바르게 표시되도록 했습니다.

이제 앱을 실행하고 메뉴 항목 중 하나를 클릭하면 해당 섹션으로 스크롤되는 것을 볼 수 있습니다. 그러나 메뉴를 클릭하면 해당 섹션으로 이동하는 것을 볼 수 있습니다. 사용자가 부드러운 스크롤과 같은 더 좋은 경험을 하길 원할 수 있습니다. 다음 CSS를 추가하여 추가할 수 있습니다.

html {
  scroll-behavior: smooth;
}

이제 어플리케이션을 실행하면 부드러운 스크롤링을 볼 수 있을 것입니다. 응용 프로그램을 테스트할 수도 있습니다here.

Smooth scrolling is not yet supported in Safari. You can check the browser support details here.

useRef 후크를 사용한 스크롤

ID를 제공하지 않고 참조를 사용하려면 다음 코드를 사용하여 이를 수행할 수 있습니다.

import React, { useRef } from "react"

const App = () => {
  const paraRef = useRef(null)
  const clickHandler = () => {
    paraRef.current &&
      paraRef.current.scrollIntoView({ behavior: "smooth", block: "start" })
  }
  return (
    <div>
      <button onClick={clickHandler}>Scroll to Next para</button>
      <p className="section">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde eum
        repudiandae ut tempore laudantium, provident labore doloremque sit
        magnam, minima temporibus explicabo voluptatibus cupiditate a culpa
        reprehenderit magni, qui aspernatur! Laborum a iure doloribus, officia
        earum asperiores ut, hic voluptates libero sed consequuntur facere
        itaque natus quisquam! Numquam explicabo sint saepe porro, qui quibusdam
        nam eum minima quasi temporibus. Non?
      </p>
      <p className="section" ref={paraRef}>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde eum
        repudiandae ut tempore laudantium, provident labore doloremque sit
        magnam, minima temporibus explicabo voluptatibus cupiditate a culpa
        reprehenderit magni, qui aspernatur! Laborum a iure doloribus, officia
        earum asperiores ut, hic voluptates libero sed consequuntur facere
        itaque natus quisquam! Numquam explicabo sint saepe porro, qui quibusdam
        nam eum minima quasi temporibus. Non?
      </p>
      <p className="section">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde eum
        repudiandae ut tempore laudantium, provident labore doloremque sit
        magnam, minima temporibus explicabo voluptatibus cupiditate a culpa
        reprehenderit magni, qui aspernatur! Laborum a iure doloribus, officia
        earum asperiores ut, hic voluptates libero sed consequuntur facere
        itaque natus quisquam! Numquam explicabo sint saepe porro, qui quibusdam
        nam eum minima quasi temporibus. Non?
      </p>
    </div>
  )
}

export default App

여기서는 useRef 후크를 사용하여 스크롤하려는 섹션에 대한 참조를 생성했습니다. 버튼을 클릭하면 참조의 scrollIntoView 메서드를 호출합니다.
block 옵션에서 'end'를 지정하여 섹션의 끝으로 스크롤하고 'center'를 지정하여 섹션의 가운데로 스크롤할 수 있습니다.

작업 데모를 볼 수 있습니다here.