[React] react-scroll 라이브러리를 이용한 클릭시 스크롤 이동 구현

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

react-scroll

 

설치하기 (Reat+TS 를 이용해 구현 중이라 둘 다 설치하였다.)

npm i react-scroll //React
npm i @types/react-scroll //TypeScript 시 설치

 

import

import { Link } from 'react-scroll';

 

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>
    
#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>

 

to : 어떤 컴포넌트로 갈 것인지
spy :  스크롤이 타켓 포지션에 있다면, 해당 Link 태그가 selected되도록 해준다.
smooth : 스크롤 애니메이션 

 

https://velog.io/@blackeichi/React-%ED%8A%B9%EC%A0%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%8F%99%ED%95%98%EA%B8%B0

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

<Link
  to={item.id}
  spy={true} //스크롤 감지하여 activeClass 적용시켜줌
  smooth={true}
  key={idx}
  activeClass='menuActive' //정한 클래스에 css를 적용하면 해당 영역 스크롤 시 style적용됨
>