[react-scroll] navbar 클릭 시, 해당 컴포넌트로 스크롤을 이동하려면?

 

 

 

1️⃣ react-scroll 라이브러리를 설치한다.

$ npm install react-scroll

 

 

 

2️⃣ navbar에 <Link>를 다는데, 중요한 건 Link를 "react-router-dom"이 아닌 "react-scroll"에서 import 한다. 

import { Link } from "react-scroll";

<ul>
          <li>
            <Link
              activeClass="active"
              to="introSection"
              spy={true}
              smooth={true}
              duration={400}
            >
              INTRO
            </Link>
          </li>
          
          ...
          
</ul>

https://www.npmjs.com/package/react-scroll

react-scroll

옵션값을 확인해 볼 수 있다.

 

 

 

 

3️⃣ Link의 to 옵션값을 이동하길 원하는 요소의 id로 할당해준다.

<div id="introSection">
...
</div>

 

 

 

 

4️⃣ navbar를 클릭하면 해당 요소로 잘 이동하는 것을 확인할 수 있다. 끗!