[React] 브라우저 새로고침(Refresh)시 스크롤 최상단 이동

 

 

 

React 프로젝트의 경우 따로 설정을 해주지 않으면 스크롤 후 새로고침하면 이전 값으로 돌아가게 된다.

해당 내용을 방지해주기 위해선 처음 렌더링이 되는 src/App.js(App.tsx)에 해당 내용을 넣어주면 된다.

useEffect(() => { 
	window.onbeforeunload = function pushRefresh() {
		window.scrollTo(0, 0);
	};
}, []);

처음 렌더링 시 scrollTo를 이용해 scrollY, scrollH 값을 0으로 옮겨주므로 최상단으로 이동하게 된다.