리액트 (use)Ref 스크롤 이벤트

useRef란?

useRef는 구성 요소 렌더링 간에 지속되는 변경 가능한 참조를 만들 수 있는 React의 후크입니다. 즉, 속성이나 상태의 변경으로 인해 구성 요소가 다시 렌더링되더라도 동일한 참조를 사용하여 값이나 DOM 요소에 액세스하고 업데이트할 수 있습니다. useRef는 불필요한 재렌더링을 방지하여 성능을 최적화할 뿐만 아니라 구성 요소 내의 여러 함수 또는 후크에서 액세스해야 하는 DOM 요소에 대한 값 또는 참조를 저장하는 데 유용할 수 있습니다.

공홈 참조

https://ko.legacy.reactjs.org/docs/hooks-reference.html#useref

 

scrollIntoView()

scrollIntoView()는 요소를 브라우저 창의 보이는 영역으로 부드럽게 스크롤할 수 있는 내장 JavaScript 메서드입니다. 요소에서 호출되면 뷰포트를 스크롤하여 해당 요소를 보기로 가져오고, 뷰포트의 상단 또는 하단에 대한 요소의 정렬, 스크롤 애니메이션의 지속 시간 및 여부와 같은 스크롤 동작을 제어하는 옵션을 사용합니다. 부드러운 스크롤을 사용하지 않습니다. 이 방법은 웹 개발에서 웹 페이지의 다른 부분을 탐색할 때 부드러운 스크롤 효과를 만들거나 사용자 작업 또는 이벤트에 대한 응답으로 특정 요소로 프로그래밍 방식으로 스크롤하는 데 자주 사용됩니다.

 

React 16.8 +, 함수형 컴포넌트(Functional component)

const ScrollDemo = () => {
   const myRef = useRef(null)

   const executeScroll = () => myRef.current.scrollIntoView()    
   // run this function from an event handler or an effect to execute scroll 

   return (
      <> 
         <div ref={myRef}>Element to scroll to</div> 
         <button onClick={executeScroll}> Click to scroll </button> 
      </>
   )
}

React 16.8 +, 클래스 컴포넌트(Class component)

class ReadyToScroll extends Component {
    constructor(props) {
        super(props)
        this.myRef = React.createRef()  
    }

    render() {
        return <div ref={this.myRef}>Element to scroll to</div> 
    }  

    executeScroll = () => this.myRef.current.scrollIntoView()
    // run this method to execute scrolling. 
}

옵션 : Smoothe 스크롤 애니메이션

/* css */
html {
    scroll-behavior: smooth;
}

 

참조 - https://stackoverflow.com/questions/43441856/how-to-scroll-to-an-element