[React] 웹 페이지 전환 시 자동으로 최상단 스크롤링 하기


[React] 웹 페이지 전환 시 자동으로 최상단 스크롤링 하기

웹을 개발하는 도중 한 페이지에서 아래로 스크롤 하고 한 버튼을 클릭해 다른 페이지로 전환했다. 만약에 자동으로 상단으로 (혹은 원하는 위치로) 스크롤이 안되면 이는 유저에게 엄청 큰 불편함을 야기한다. 따라서 오늘은 이 문제를 해결한다. React로 하면 간단히 해결할 수 있다. import { useEffect } from "react"; const MainPurchase = () => { useEffect(() => { window.scrollTo(0, 0); }, []); useEffect 훅을 사용하여 MainPurchase.js에 진입했을 때 자동으로 위치 (0,0)으로 스크롤링 시킨다. 핵심은 window.scrollTo(xpos, ypos); 파라미터로 주어진 xpos는 x좌표, 즉 가로 위치를 말하는 것이고, ypos는 y좌표, 즉 세로 위치를 말하는 것이다. edhoradic, 출처 Unsplash...


#react #scrollto #useeffect #window

원문링크 : [React] 웹 페이지 전환 시 자동으로 최상단 스크롤링 하기