[React] scroll to top, useRef 이용하여 스크롤 이동하기

리엑트에서 화면 스크롤 이동이 가능하다.

 

1. scroll to top 함수 만들기

스크롤을 화면 가장 상단으로 올리는 부분은 scrollTo 를 사용하여 위치를 가장 상단인 0으로 지정한 뒤 이동시킬 수 있다.

const scrollToTop = () -> {
	window.scrollTo({
    		top:0,
    		behavior: 'smooth'
    })
};

 

behavior 옵션은 auto 와 smooth 로 설정 가능하며 auto는 바로 이동, smooth는 말 그대로 부드럽게 이동시킨다.

 

2. useRef

저장공간(변수 관리), DOM 요소에 접근을 위해 사용되는 훅이다.

useState와 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태 값을 저장한다.

또한, 객체 내부에 있는 'current' 반환값에 접근 또는 변경이 가능하다.

그 값이 변하더라도 렌더링을 발생시키지 않는다.

import React, {useRef} from "react";

function App() {
	const moveToDiv = useRef();
    const onMoveToDiv = () => {
    	moveToDiv.current.scrollIntoView({ behavior: 'smooth', block: 'start'});
    };
    
    return (
    	<>
      		<div>
            	Top div
                <Button onClick={onMoveToDiv}>화면이동버튼</Button>
            <div>
       		<div ref={moveToDiv}>이동 할 Div<div>
        </>
    );
    
}

export default App;

 

원하는 위치에 ref 값을 주고 

버튼 클릭 시 해당 위치로 스크롤 이동을 할 수 있다.