[React] react-scroll 사용후기

오늘 포트폴리오 기능개선을 하면서 기존의 a태그를 없애고 싶은 마음에 react scroll이라고 구글링을 해보았다.

그중 가장 유력해 보이는 기능이 react-scroll이라는 라이브러리였던 것 같아 사용해 보았다.

---

 

react-scroll 예시

---

사용법은 간단했다.

npm install react-scroll

react-scroll을 저장하고,

import { Link } from "react-scroll";

사용하고자 하는 컴포넌트에 위의 Link 태그를 불러온다.

** react-router의 Link와는 다른 태그이다.

<Link
    activeClass="active"
    to={item.link}
    spy={true}
    smooth={true}
    duration={100}>
		{item.link.toUpperCase()}
</Link>

마지막으로 Link태그를 이용한다. Link태그에는 다양한 속성값이 존재하는데, 대부분 to, spy, smooth는 필수적으로 사용하는듯싶다.

to에는 스크롤하고자 하는 DOM의 id값을 넣어주면 된다.

---

React에 관련된 유용한 라이브러리는 수도 없이 많은 것 같다.

이렇게 하나하나 알아가는 재미도 쏠쏠한 것 같다 ㅎㅎ..

---

https://github.com/mediumryan/portfolio