React에서 스크롤 위치 설정

요즘 웹 애플리케이션은 많은 콘텐츠를 표시하는 경향이 있습니다. 사용자는 종종 원하는 것을 찾기 위해 전체 페이지를 스크롤해야 합니다.

이것은 나쁜 사용자 경험입니다. 해결책은 사용자가 스크롤하지 않고 특정 페이지 섹션으로 건너뛸 수 있는 버튼을 만드는 것입니다.

이 기사에서는 React에서 고정 스크롤 위치를 설정하는 방법을 살펴봅니다.

React에서 스크롤 위치 설정

먼저 DOM 요소에 대한 참조를 JavaScript 변수에 저장해야 합니다. 이를 위해 기본 JavaScript에서 getElementById() 메서드의 대안인 useRef() 후크를 사용할 수 있습니다.

예를 살펴보겠습니다.

import { useRef } from "react";
export default function App() {
  const welcome = useRef(null);
  const about = useRef(null);
  const terms = useRef(null);

  return (
    <div className="App">
      <h1 ref={welcome}>Welcome to Web Application</h1>
      <h1 ref={about}>About Us</h1>
      <h1 ref={terms}>Terms and Conditions</h1>
    </div>
  );
}

여기에서 useRef() 후크를 사용하여 ref 값을 생성합니다. useRef() 후크에 대한 인수는 ref의 초기 값이 됩니다.

후크는 변수에 저장할 수 있는 참조도 반환합니다. ref 값을 welcome, about 및 terms 변수에 저장합니다.

JSX 내에서 ref를 저장한 변수와 동일한 세 요소의 ref 속성을 설정합니다. 이는 <h1> 태그와 같은 DOM 요소를 JavaScript 변수에 연결합니다.

그런 다음 이러한 요소로 직접 이동하는 이벤트 핸들러를 만듭니다.

참고: JavaScript 변수에 대한 참조를 중괄호로 묶는 것을 잊지 마십시오. 그들은 JSX 내에서 JavaScript 표현식(변수에 대한 참조와 같은)을 작성해야 합니다.

다음으로 하나의 인수(ref 값)를 사용하고 스크롤 위치를 해당 DOM 요소의 위쪽 테두리로 설정하는 이벤트 핸들러를 생성해 보겠습니다.

const setScrollPosition = (ref) => {
  window.scrollTo({
    top: ref.current.offsetTop,
    behavior: 'smooth',
  });
};

이렇게 하면 이벤트 핸들러를 재사용할 수 있으며 특정 요소로 스크롤하는 데 사용할 수 있습니다. 스크롤 위치를 설정하기만 하면 특정 ref 변수를 이벤트 핸들러에 전달하기만 하면 됩니다.

이를 위해 React를 포함한 JavaScript 라이브러리에서 기본적으로 사용할 수 있는 window 인터페이스의 scrollTo() 메서드를 사용합니다.

DOM 요소의 위쪽 테두리를 결정하기 위해 ref 값의 current 속성에 액세스합니다. scrollTo() 메소드를 사용하여 스크롤 위치의 상단을 DOM 요소의 상단 테두리로 설정합니다.

원활한 탐색을 설정하기 위해 scrollTo 메서드의 behavior 속성도 지정합니다.

이제 구성 요소의 전체 코드를 살펴보겠습니다.

import { useRef } from "react";
export default function App() {
  const welcome = useRef(null);
  const about = useRef(null);
  const terms = useRef(null);
  const setScrollPosition = (ref) => {
    window.scrollTo({
      top: ref.current.offsetTop,
      behavior: "smooth"
    });
  };
  return (
    <div className="App">
      <h1 ref={welcome}>Welcome to Web Application</h1>
      <h1 ref={about}>About Us</h1>
      <h1 ref={terms}>Terms and Conditions</h1>
      <div className="buttons">
        <button onClick={() => setScrollPosition(welcome)}>
          Skip to Welcome
        </button>
        <button onClick={() => setScrollPosition(about)}>
          Skip to 'About Us'
        </button>
        <button onClick={() => setScrollPosition(terms)}>Skip to terms</button>
      </div>
    </div>
  );
}

이 마지막 코드에서는 세 개의 버튼이 있는 고정 바닥글을 추가합니다. 이 라이브 CodeSandBox 데모를 열어 애플리케이션이 어떻게 작동하는지 확인할 수 있습니다.

버튼 중 하나를 클릭하면 특정 DOM 요소에 초점을 맞춘 스크롤 위치가 설정됩니다.

이는 onClick 이벤트 핸들러에서 이전에 정의한 setScrollPosition() 함수를 호출하기 때문입니다. 이벤트 핸들러를 설정한 요소에 대한 ref 값을 저장하는 변수인 하나의 인수를 제공합니다.