react) 페이지 이동 후 원하는 위치로 스크롤 이동하기 (feat setTimeout)

모바일 사이드바에서 버튼을 누르면 해당 위치로 이동하는 기능을 구현해야 했는데,
다른 페이지에 머무르다가도, 모바일 사이드바의 버튼을 누르면 해당 페이지로 이동한 뒤에 스크롤이 이동되어야 했다.

문제점은 해당 위치로 이동하는 메인페이지의 height값이 다른 곳보다 훨씬 높았기에 scroll이 정상적으로 작동하지 않았다.

예를들어 review 페이지의 최대 height가 2000px이고, 버튼을 누르면 이동해야하는 곳이 main 페이지의 height 4400px 지점이라면, 메인페이지의 4400px까지 도달하지 못하고 2000px에서 멈추는 현상이 발생하는 것이다.

자바스크립트가 실행되는 순서를 생각 해봤을 때 scrollHandler의 첫번째 줄인 navigate 함수를 통해 메인페이지로 이동시키고, 그 결과를 기다리지 않고, 그 다음줄로 바로 넘어가기 때문에, 페이지가 완전히 이동되지 않은 상태에서의 scroll은 이동해야 할 scroll보다 짧기 때문에 완전히 이동하지 못한다고 생각하였고, 페이지가 완전히 이동되어 스크롤이 생성되기까지 약간을 시간이 필요하겠다고 생각하여 setTimeout을 통해 딜레이를 주었다.(0초를 주어도 queue에서 call stack으로 넘어가는데까지 0.004초의 딜레이가 발생됨)

const scrollHandler = useCallback((x:number) => {
  navigate("/");
  setTimeout(() => {window.scrollTo(0,x)},0)
  setIsShow(false);
},[])