목적

한 페이지의 Y Scroll이 인 경우, 따로 Y Scroll 위치를 조정하지 않으면 새로 고침할 때, 새로 고침 하기 전 위치로 고정되어 페이지가 다시 렌더링됩니다.

페이지의 목적에 따라 다르겠지만, 이번 프로젝트를 수행하면서 페이지를 새로 고침하면 최상단으로 이동하게끔 해야할 것 같아서 다음과 같이 구현했습니다.

랜딩 페이지의 경우, Y Scroll 값이 다른 페이지에 비해 현저히 크기 때문에, 새로 고침할 때, 최상단으로 이동하도록 하는 것이 UX상 좋을 것 같아 아래와 같이 수행했습니다.

src/App.js

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

페이지가 렌더링될 때마다, 위 함수가 실행되며, X Scroll과 Y Scroll의 위치를 top:0 , left:0 으로 이동시킵니다.

즉, 최상단으로 이동할 수 있습니다!