[nextjs] scrollRestoration

• nextjs 프로젝트에서 새 페이지를 만들면서 무한스크롤 구현 시, 페이지를 새로고침하면 이전 페이지의 스크롤 포지션이 유지되거나 아예 바닥으로 가는 문제가 발생했다.
• _app 파일이나 next.config 파일에서 스크롤 포지션을 유지하는 코드나 옵션을 찾지 못했고, 새로운 프로젝트에서는 이 문제가 발생하지 않았다.
• 스크롤 포지션을 되돌리는 방법을 찾아보고 실험한 결과, window 객체의 history 프로퍼티의 scrollRestoration 옵션을 'manual'로 설정하면 스크롤이 항상 최초 위치로 가는 것을 확인했다.
• 스크롤을 움직이게 하려면 사용자가 직접 움직이도록 설정해야 하며, 이를 위해 useLayoutEffect를 사용했다. 이는 무한스크롤을 진행하는 도중 데이터가 없어 바닥면을 찍고 데이터 호출 후 다시 탑으로 가는 상황을 방지하기 위함이다.

북마크
공유하기
신고하기