[개인 쇼핑몰 개발] ScrollRestoration

 

개인 쇼핑몰을 개발하던 중,

랜더링시 스크롤의 위치가 중간이나 밑에서 어중간하게 시작하는 경우가 빈번하다는 것을 알게 되었다.

그래서 랜더링시 무조건 맨 위에서 시작하게 하려면 어떻게 해야 할까 고민을 하다가,

React router v5부터는 ScrollRestoration을 지원한다는 것을 알게 되었다.

 

이 구성 기능은 페이지 전환 시 스크롤 위치를 자동으로 관리해주어 맨 위에서 렌더링되도록 할 수 있다.

복잡하게 상태 관리를 해줄 필요 없이 아래의 코드만 있으면

페이지를 전환해도 항상 맨 위에서 랜더링된다는 얘기다!

 

import { ScrollRestoration } from "react-router-dom";
<ScrollRestoration />

 

더 자세한 내용이 궁금한 사람들도 있을 수 있으니,

링크를 첨부하고 간다.

https://reactrouter.com/en/main/components/scroll-restoration#scrollrestoration-