설명

프로젝트시 페이지 네이션으로 페이지가 이동이 되는데 최상단으로 이동 하지 않고 하단에 머물러 있어 생각하게 되었다.

코드

검색을 해보니 쉽게 나왔다.

// ScrollTop.ts

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

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

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

  return null;
}

// Recruitment.tsx

 return (
    <>
      {/* pathname이 변경되면 최상단으로가는 로직 => 나는 url이 안바껴서 curPage로 프롭내려줌 */}
      <ScrollToTop curPage={curPage} />
	....
    .....
	...... 코드들
 	</>
  );

1. 먼저 따로 ScrollTop.ts로 컴포넌트로 빼서 만들어준다.
2. 필요로한 곳에 import 하여 최상단에 추가해준다.
   • 보통 사람들 설명에는 라우팅 페이지 혹은 app.js 브라우저 라우터 밑에 설정을 해주었다. 이유는 페이지가 바뀔때마다 실행이 되게 하기 위함이다.
   • ScrollTop.ts 코드를 보면 useLocation()으로 파람이 변경이 될 때마다 useEffect가 실행이 됨을 알 수 있다.
   • 나는 페이지 네이션시 url이 변경이 되지 않아(로직이 잘못 된듯..) 따로 props을 내려주어 curPage가 변경이 될 때 실행이 되게 수정하였다.