React-scroll 사용법 - React-scroll sayongbeob

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

react-scroll

A scroll component for React.js

www.npmjs.com

① react-scroll 설치

npm install --save react-scroll

② src/components/Main/Main.js 

먼저 페이지를 하나 만들어서 이동할 영역 Middle과 클릭 시 Middle 영역으로 이동하게 할 Side 영역으로 나눠준다

import React from "react"
import styled from "styled-components"
import Middle from "./Sections/Middle"
import Side from "./Sections/Side"

const MainDiv = styled.div`
  margin: 3rem 5rem;
`

const ContentDiv = styled.div`
  width: 100%;
  display: flex;
`

const Main = () => {
  return (
    <MainDiv>
      <ContentDiv>        
        <Middle />
        <Side />
      </ContentDiv>
    </MainDiv>
  )
}

export default Main

③ src/components/Main/Sections/Side.js 

import React from "react"
import styled from "styled-components"
import { Link } from "react-scroll"

const SideDiv = styled.div`
  width: 10%;
  position: fixed;
  right: 5rem;
  margin-top: 70px;
  div {
    display: flex;
    flex-direction: column;
  }
`

const Side = () => {
  return (
    <SideDiv>
      <div>
        <Link to="1" spy={true} smooth={true}>
          <span>Day 1</span>
        </Link>
        <Link to="2" spy={true} smooth={true}>
          <span>Day 2</span>
        </Link>
        <Link to="3" spy={true} smooth={true}>
          <span>Day 3</span>
        </Link>
        <Link to="4" spy={true} smooth={true}>
          <span>Day 4</span>
        </Link>
      </div>
    </SideDiv>
  )
}

export default Side

④ src/components/Main/Sections/Middle.js

import React from "react"
import styled from "styled-components"

const MiddleDiv = styled.div`
  div {
    height: 500px;
  }
`

const Middle = () => {
  return (
    <MiddleDiv>
      <div id="1">
        <h2>day 1</h2>
        <p>content</p>
      </div>
      <div id="2">
        <h2>day 2</h2>
        <p>content</p>
      </div>
      <div id="3">
        <h2>day 3</h2>
        <p>content</p>
      </div>
      <div id="4">
        <h2>day 4</h2>
        <p>content</p>
      </div>
    </MiddleDiv>
  )
}

export default Middle

이렇게 오른쪽 사이드에 생성한 Day 1~Day 4 텍스트를 클릭하면 

왼쪽에 있는 해당 영역으로 잘 이동한다

react-scroll 을 사용하여 스크롤 이동하는 프로젝트를 구현해 보았습니다.

import React from 'react';
import styled from 'styled-components';
import Middle from './Middle';
import Side from './Side';

const ScrollPage = () => {
  return (
    <MainBlock>
      <ContentBlock>
        <Middle />
        <Side />
      </ContentBlock>
    </MainBlock>
  );
};

export default ScrollPage;

Middle.js는 오른쪽에 목차처럼 Day1, Day2 를 가리킬 컴포넌트입니다.

import React from 'react';
import styled from 'styled-components';

const Middle = () => {
  return (
    <MiddleBlock>
      <div id="1">
        <h2>day 1</h2>
        <p>contnet</p>
      </div>
      <div id="2">
        <h2>day 2</h2>
        <p>contnet</p>
      </div>
      <div id="3">
        <h2>day 3</h2>
        <p>contnet</p>
      </div>
      <div id="4">
        <h2>day 4</h2>
        <p>contnet</p>
      </div>
    </MiddleBlock>
  );
};

const MiddleBlock = styled.div`
  div {
    height: 500px;
  }
`;

export default Middle;

Middle을 클릭해주면 그에 맞게 스크롤이 이동되는 해당 영역을 Side 컴포넌트로 나눠줍니다.

import React from 'react';
import { Link } from 'react-scroll';
import styled from 'styled-components';

const Side = () => {
  return (
    <SideBlock>
      <div>
        <Link to="1" spy={true} smooth={true}>
          <span>Day 1</span>
        </Link>
        <br />
        <Link to="2" spy={true} smooth={true}>
          <span>Day 2</span>
        </Link>
        <br />
        <Link to="3" spy={true} smooth={true}>
          <span>Day 3</span>
        </Link>
        <br />
        <Link to="4" spy={true} smooth={true}>
          <span>Day 4</span>
        </Link>
      </div>
    </SideBlock>
  );
};

const SideBlock = styled.div`
  width: 10%;
  position: fixed;
  right: 5rem;
  margin-top: 70px;
  div {
    display: flex;
    flex-direction: column;
  }
  span {
    cursor: pointer;
  }
`;

export default Side;