2023.09.01

react useRef 훅을 이용한 스크롤 이동

 

아래는 간단한 예시이다.

import React, { useRef } from 'react';

function ScrollToButton() {
  const myRef = useRef(null);

  // 스크롤 이동 함수
  const scrollToRef = () => {
    if (myRef.current) {
      window.scrollTo({
        top: myRef.current.offsetTop,
        behavior: 'smooth', // 부드러운 스크롤을 위해 'smooth' 옵션 사용
      });
    }
  };

  return (
    <div>
      <button onClick={scrollToRef}>특정 위치로 스크롤 이동</button>
      <div style={{ height: '100vh' }}></div>
      <div ref={myRef}>이곳으로 이동.</div>
    </div>
  );
}

export default ScrollToButton;

 

1. useRef를 사용하여 DOM의 요소에 대한 참조를 만들고, myRef.current를 확인하여 myRef 변수가 현재 참조하는 DOM 요소가 있는지 확인한다.
2. offsetTop 속성을 사용하여 myRef가 참조하는 요소의 상단 위치를 가져온다.
3. window.scrollTo 메서드를 사용하여 스크롤 위치를 설정한다. 이때 top 속성에 offsetTop 값을 전달하여 해당 위치로 스크롤을 이동하고, behavior: 'smooth'를 설정하여 부드러운 스크롤 효과를 부여한다( 옵션 ).

4. 버튼을 클릭하면, 참조한 DOM요소의 스크롤 위치로 이동하게 된다.