[React] react-scroll 라이브러리 사용법 및 주의사항

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

react-scroll

 

사용 순서 

1. 설치하기

npm install react-scroll

2. 불러오기

다 불러올 필요는 없고, 쓸 것들만 불러오면 된다.

import * as Scroll from "react-scroll";
import {
  Link,
  Button,
  Element,
  Events,
  animateScroll as scroll,
  scrollSpy,
  scroller,
} from "react-scroll";

3. 사용하기

1) 클릭하면 이동할 곳을 설정해준다.

<Link to="intro">
        <span>소개 </span>
</Link>

2) 이동될 곳에 링크를 걸어준다.

//이렇게 걸면 안되고
<Project name="project" />
//이렇게 걸어야 함 div로
<div name="project">
        <Project />
</div>

기능들은 공식 문서에 가서 확인해보면서 필요한 것만 넣으면 된다. (https://www.npmjs.com/package/react-scroll)

 

아래처럼 움직인다!

 

 

주의사항

외부에서 불러온 앱 컴포넌트들에는 react-scroll 링크가 걸리지 않는다. 한 페이지에 다 써줘야 하는 것 같다. 

(물론 아닐수도.. 아니라면 알려주세욥)