[PORTFOLIO] react-scroll

React-scroll

시작하며

버튼을 누르면 원하는 컴포넌트에 스크롤이 되게끔 구현하고 싶어서
React-scroll을 알게되어 사용해보았다.

1. 설치

npm install --save react-scroll

사용방법

header의 버튼을 누르면 원하는 컴포넌트 위치로 스크롤이 되게끔 할 것이다.

header에 우선 import해주고 스크롤을 적용시켜줄 element에 코드를 추가해서 감싸준다.

header

import { Link } from 'react-scroll';  // react-router-dom의 Link와 혼동할 수 있음.

const Header = () => {
  return (
    <HeaderContainer>
        <div>
          <Link to='about' spy={true} smooth={true}>
            ABOUT
          </Link>
        </div>
    </HeaderContainer>
  );
};

export default Header;

Link to='about'이라 썻는데 저 경로는 어디에 써야하는가?

스크롤을 원하는 컴포넌트에 id 값을 넣어주면 된다.

About

const About = () => {
  return (
    <S.AboutContainer id='about'>
      ~~~~~
    </S.AboutContainer>
  );
};

export default About;

이렇게 쓰면 Header의 ABOUT 버튼을 클릭시 About컴포넌트로 스크롤이된다.