a 태그로 페이지 이동 없이 해당 컴포넌트 이동하기

React에서는 페이지 라우팅 대신 하나의 페이지 내에서 사용자가 네비게이션을 클릭할 때 해당 컴포넌트로 부드럽게 이동하는 방법에 대해서 다루어 보겠다.

이동할 컴포넌트 만들기

import React from 'react';

function SectionOne (): JSX.Element {
  return <div id="section-one">Section One</div>;
};

function SectionTwo (): JSX.Element {
  return <div id="section-two">Section Two</div>;
};

const App = (): JSX.Element => {
  return (
    <div>
      <SectionOne />
      <SectionTwo />
      {/* More sections... */}
    </div>
  );
};

export default App;

Navigation만들기

function Navigation (): JSX.Element {
  return (
    <nav>
      <a href="#section-one">Go to Section One</a>
      <a href="#section-two">Go to Section Two</a>
    </nav>
  );
};

동적으로 스크롤 해야 하는 경우!!

interface IProps {
  id:string;
}  

function Navigation ({id}: IProps): JSX.Element {
  return (
    <nav>
      <a href={`#${id}`}</a>
    </nav>
  );
};

스크롤 부드럽게 하기

html {
  scroll-behavior: smooth;
}

header를 sticky와 같은 속성으로 상단 고정 했을 경우!!!

html {
  scroll-behavior: smooth;
  scroll-padding-top: header높이!!; // 추가!!
}