React에서 요소로 스크롤

1. React의 Element.scrollIntoView() 메소드를 사용하여 요소로 스크롤
2. React Refs(참조)가 있는 요소로 스크롤

현대 인터넷은 모든 유형의 콘텐츠로 가득 차 있습니다. 찾고 있는 것을 찾기 위해 스크롤해야 하는 경우가 많습니다. 그러나 무한 피드를 스크롤하는 것은 실망스럽고 나쁜 UX 관행이 될 수 있습니다. 한 가지 해결책은 목차를 만드는 것입니다.

React 프레임워크는 동일한 결과를 얻을 수 있는 더 나은 방법을 제공합니다. 자동으로 또는 버튼을 클릭하여 요소를 참조하고 스크롤할 수 있습니다. 사용자가 무엇을 찾고 있는지 감지하고 즉시 표시하면 앱이나 웹사이트의 사용자 친화성을 높일 수 있습니다.

이 기능을 구현하는 방법에는 여러 가지가 있습니다. 사용하는 구성 요소 유형(기능 대 클래스)에 따라 적절한 구성 요소를 선택해야 합니다.

여전히 모든 구현은 HTML 요소 인터페이스에서 제공하는 Element.scrollIntoView() 메서드와 useRef() 후크(기능 구성 요소용)를 사용하여 만들 수 있는 React refs(참조의 약어)의 두 가지 비트로 구성됩니다. 또는 createRef() 메서드(클래스 구성 요소의 경우).

React의 Element.scrollIntoView() 메소드를 사용하여 요소로 스크롤

이전에 언급했듯이 이 메서드는 스크롤이 위나 아래로 이동하여 호출된 요소를 표시하도록 합니다.

element.scrollIntoView()는 하나의 인수만 받아들일 수 있습니다. alignToTop 부울 또는 options 개체일 수 있습니다.

alignToTop

true 부울 값을 전달하면 요소가 스크롤 가능한 상위 요소의 맨 위에 정렬됩니다.

false 값을 전달하면 요소가 스크롤 가능한 상위 요소의 맨 아래에 정렬됩니다.

Options

이 인수는 개체로 표시되지만 메서드의 기본 설정을 사용자 지정하고 변경할 수 있습니다.

개체에는 세 가지 선택적 속성이 있을 수 있습니다. 부재 시 설정이 기본값으로 되돌아갑니다.

1. behavior 속성을 사용하면 전환을 사용자 지정할 수 있습니다. 기본적으로 auto으로 설정되어 있습니다. 더 보기 좋은 애니메이션인 smooth으로 설정할 수 있습니다.
2. block 속성을 사용하면 요소를 수직으로 배치할 수 있습니다. start, center, end 또는 nearest 값을 사용할 수 있습니다. start는 기본 설정입니다.
3. inline 속성을 사용하면 요소를 수평으로 배치할 수 있습니다. start, center, end 또는 nearest 값을 사용할 수 있습니다. nearest이 기본 설정입니다.

브라우저 지원

element.scrollIntoView() 메소드 자체는 모든 주요 브라우저에서 지원됩니다. 그러나 일부 오래된 브라우저는 전달된 options 인수를 무시합니다. caniuse.com에 따르면 전 세계 사용자의 ~76%만이 이 주장을 지원하는 브라우저를 가지고 있습니다. 웹 사이트에서는 이를 실험적 기능으로 설명합니다.

React Refs(참조)가 있는 요소로 스크롤

React의 Refs에는 다양한 애플리케이션이 있습니다. 가장 일반적인 용도 중 하나는 DOM의 요소를 참조하는 것입니다. 요소를 참조하여 액세스 요소의 인터페이스도 얻습니다. 이것은 스크롤하려는 요소를 캡처하는 데 필수적입니다.

요소는 ref 속성을 참조 인스턴스로 설정하여 참조할 수 있습니다. 다음은 코드 예입니다.

const testDivRef = useRef(null);
<div className = 'testDiv' ref = {testDivRef}>< /div>

여기에서 <div> 요소는 보기로 스크롤하려는 요소입니다. 다른 HTML 요소에서도 반응 참조를 사용할 수 있습니다.

<h1 ref={testDivRef}>Title</h1>

참조 개체의 current 속성은 실제 요소를 보유합니다. 콘솔에 testDivRef.current를 기록하면 다음과 같이 됩니다.

아래는 전체 솔루션입니다.

기능적 구성 요소에서:

function TestComponent() {
  const testRef = useRef(null);
  const scrollToElement = () => testRef.current.scrollIntoView();
  // Once the scrollToElement function is run, the scroll will show the element
  return (
    <>
      <div ref={testRef}>Element you want to view</div>
      <button onClick={scrollToElement}>Trigger the scroll</button>
    </>
  );
}

클래스 구성 요소에서:

class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.testRef = React.createRef();
  }
  scrollToElement = () => this.testRef.current.scrollIntoView();
  // Once the scrollToElement method is run, the scroll will show the element
  render() {
    return <div ref = {this.testRef}>Element you want in view < /div>;
  }
}

추가 팁:

current 속성은 구성 요소가 마운트된 후에만 액세스할 수 있습니다.

useEffect() 콜백 또는 이에 상응하는 것(클래스 구성 요소에 대한 componentDidMount() 수명 주기 메서드)에서 속성을 참조하는 것이 가장 좋습니다.

useEffect(() => console.log(testRef.current), [])

진행하기 전에 ref.current가 true인지 조건부로 확인할 수도 있습니다.

if (testRef.current) {
  testRef.current.scrollIntoView()
}

버튼을 클릭하여 스크롤이 트리거되도록 설정할 수 있습니다. 이런 식으로 버튼과 보아야 할 구성 요소가 마운트되면 스크롤이 실행되도록 할 수 있습니다.

<button onClick={scrollToElement}>Trigger the scroll</button>

번들 솔루션

react-scroll-to-component라는 NPM 패키지는 이 기능을 번들 솔루션으로 제공하기 위해 특별히 제작되었습니다. npm이나 yarn으로 쉽게 설치할 수 있습니다.

이 패키지에 대해 자세히 알아보려면 문서를 읽으십시오.