[React]-스크롤을 제자리로! ScrollRestoration

유튜브 비디오 상세페이지 작업 중에 related video 리스트에서 스크롤 다운 후 영상 클릭 시 스크롤 위치가 맨 위로 가지 않고 그대로 머물러 있는 이슈를 발견했다!
그래서 폭풍 구글링 결과..
리액트는 라우트 했을 때 전 페이지의 스크롤 위치 그대로 작동 되기 때문에 React Router 공식 문서에서 ScrollRestoration 을 통한 해결법을 제시하고 있다!

ScrollRestoration 관련 공식 문서

import { ScrollRestoration } from "react-router-dom";

function RootRouteComponent() {
  return (
    <div>
      {/* ... */}
      <ScrollRestoration />
    </div>
  );
}

일단 이게 기본 포맷인거 같고 it's recommended you render it in the root route of your app 이라고 나와 있는데, 앱의 루트 경로에서 렌더링 하라는 뜻이다. 그치만 이게 무슨 의미인지 확실하게 모르겠어서 일단 ScrollRestoration이 작동되길 원하는 페이지 jsx파일에 적용해보았더니 잘 작동된다.

// VideoDetail.jsx

import React from "react";
import { useParams, useLocation } from "react-router-dom";
import Related from "../components/Related/Related";
import Channel from "../components/Channel/Channel";
import { ScrollRestoration } from "react-router-dom";
export default function VideoDetail() {
  const { videoId } = useParams();
  const {
    // useLocation으로 필요한 state를 받아온다!!
    state: { item },
  } = useLocation();
  return (
    <div>
      <ScrollRestoration />
      <div>
        <iframe
          id="player"
          type="text/html"
          width="640"
          height="390"
          src={`http://www.youtube-nocookie.com/embed/${videoId}?`}
          frameBorder="0"
          title="title"
        ></iframe>
        <h5>{item.snippet.title}</h5>
        <Channel />
      </div>
      <Related />
    </div>
  );
}

• 추가로 알아보기