[React] 특정 컴포넌트로 스크롤 이동하기

이전에 포스팅하였던

React 버튼 클릭 시 스크롤 이동!!
에서 어떠한 이벤트를 하면 원하는 Box로 스크롤이 이동하도록 하는 방법을 소개하였었다.

그런데 이 방법은 컴포넌트들로 이루어진 리액트앱에서는 사용하기가 굉장히 어렵다.

그러므로 react scroll 이라는 NPM 패키지를 이용하여 간단하게 이를 구현해보자.

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

설명을 보면

React component for animating vertical scrolling

컴포넌트에서 수직 스크롤 애니메이션을 위해 만들어진 것을 알 수 있다.

Install

$ npm install react-scroll
$ npm i --save-dev @types/react-scroll
//타입스크립트에서 설치

props와 option을 보자

Props/Options

props	설명
activeClass	요소에 도달할 때 적용되는 클래스
to	Target to scroll to
containerId	스크롤 이벤트를 수신하고 스크롤을 수행할 컨테이너
spy	스크롤이 대상 위치에 있을 때 링크를 선택합니다.
hashSpy	특정 요소를 스크롤하려면 스파이를 기반으로 해시 업데이트, containerId를 설정해야 합니다.
smooth	스크롤 애니메이션
offset	Scroll additional px ( like padding )
duration	time of the scroll animation - can be a number or a function (function (scrollDistanceInPx) { return duration; }), that allows more granular control at run-time
delay	Wait x milliseconds before scroll
isDynamic	In case the distance has to be recalculated - if you have content that expands etc.
onSetActive	Invoke whenever link is being set to active
onSetInactive	Invoke whenever link is lose the active status
ignoreCancelEvents	Ignores events which cancel animated scrolling
horizontal	Whether to scroll vertically (false) or horizontally (true) - default: false
spyThrottle	Time of the spy throttle - can be a number

Usage

버튼을 클릭하였을 때, 해당 위치로 이동하는 코드는 다음과 같다.

#main
	<div id="a">
      <h2>list A</h2>
    </div>
    <div id="b">
      <h2>list B</h2>
    </div>
    <div id="c">
      <h2>list C</h2>
    </div>
    <div id="d">
      <h2>list D</h2>
    </div>
    
#header
    <Link to="a" spy={true} smooth={true} duration={400}>
      <span>List a</span>
    </Link>
    <Link to="b" spy={true} smooth={true}>
      <span>List b</span>
    </Link>
    <Link to="c" spy={false} smooth={true}>
      <span>List c</span>
    </Link>
    <Link to="d" spy={true} smooth={true}>
      <span>List d</span>
    </Link>

이외에도 다양한 사용방법이 있으니, 공식문서를 참고하면 좋을 것 같다.