페이지 이동 시 스크롤 위치 항상 위에 고정시키기

페이지 이동 시 해당페이지의 스크롤을 항상 상단으로 이동시키는 방법이다.

아래에서 위로 움직이는 애니메이션이 있는 페이지였기에 스크롤 위치가 중요했는데, 이전 페이지의 스크롤 위치가 상단이 아니면 애니메이션이 깨지는 오류가 발생해 해당 방법으로 오류를 해결하였다.

---

import { useLocation } from "react-router";
import { useEffect } from "react";

function ExamplePage() {
	const { location } = useLocation();
    
	useEffect(() => {
		window.scrollTo(0, 0);
	}, [location]);

 

*window.scrollTo
- 문서의 지정한 위치로 스크롤

---

상황

1. 아래에서 위로 뜨는 애니메이션 존재하는 페이지가 있음

2. 해당 페이지로 이동할때마다 이전페이지의 스크롤 위치에 따라 애니메이션이 망가지는 결과가 나옴

해결방안 고민

1. 이전 스크롤의 위치에 따라 해당 페이지의 애니메이션을 다르게 주는 것을 어떨까?

• 시도해보려 했으나, 그렇게 하기 위해선 이전 페이지의 스크롤 위치에 대한 상태관리가 필요했다. -> 굳이 상태관리 코드와 리소스 낭비가 우려됐다. 다른 방법이 있지 않을까 고민하다가 정말 남들이 들으면 바보같다는 소리를 들을 만큼의 엉뚱한 생각들을 많이 했다. 
• transY의 진행속도를 화면의 이동속도와 맞추는건 어떨까부터 시작해서,, 뭐 아무튼 뭐가됐든,, 내가 사용자들의 모든 스크롤 위치를 고려할 수는 없는 법이고...
• 가장 좋은 해결방법이 그나마 애니메이션을 없애는 것이었다. 그러다가 아주 기가막힌 생각이 떠올랐는데..

2. 애초에 애니메이션이 스크롤이 밑에서 시작되는 거라면 이동된 페이지를 맨 위 상단에 고정되어 시작하게 하면 되지 않나!! 그럼 이전 어느 페이지에서 어느 스크롤 위치에 있었더라도 이동한 페이지의 스크롤위치와는 상관없게 되는 것 아닌가..! 

(아마 이 생각을 다른 사람들은 먼저 했겠지만 항상 돌아돌아 생각하는 박민지야.. 공부하자)