[React] SPA 페이지 이동 시 스크롤 맨 위 유지하기

---

 

#1. SPA 페이지 이동 시 스크롤 맨 위 유지하기

리액트를 사용하는 이유 중 하나가 SPA(Sngle Page Application)로 개발하기 위함이라고 해도 과언이 아닐 것이다.

많은 장점을 가지고 있는 SPA지만, 단점도 많다.

SEO(검색엔진 최적화)문제.. 초기 구동 속도가 느리다는 것.. 등등

그 중 이것도 단점인가.. 싶기도 하지만, 개인적으로 단점이라 생각하는건데, 그것은 화면전환(페이지 이동)시 이전 페이지의 스크롤 위치가 그대로 다음 페이지에도 적용된다는 것이다.

예를들어 A라는 페이지의 하단쪽을 보고 있다가 B라는 페이지로 이동했는데 스크롤 위치가 그대로 하단쪽에 머물고 있는 것이다.

페이지 이동하면 상단부터 시작하는게 맞지 않나? 싶어서 찾아보니 쉽게 방법을 찾을 수 있었다.

 

1. 함수생성

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

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

• useLocation을 활용해 pathname을 가져온다.
• useEffect를 통해 pathname이 변할 때 마다 window객체의 스크롤의 위치를 0(x, y)으로 바꿔준다.

 

2. 함수적용

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

import ScrollToTop from '../경로';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <BrowserRouter>
      <ScrollToTop />
      <App />
    </BrowserRouter>
  </>
);

• index.js 파일의 render() 함수에 ScrollToTop 함수를 사용한다.

 

이 방법은 React에서 SPA를 구현할 때 사용되는 라이브러리 중 하나인 React-Router에도 나와있는 해결 방법이다.

알아본 방법 중 가장 깔끔한 방법인듯 하니 앞으로 유용하게 쓰일 것 같다.