[#. React] react-scroll 이용해서 텍스트 클릭 시 원하는 영역으로 스크롤 이동하기

 

 

 

 

 

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

react-scroll

 

 

 

 

 

① 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 텍스트를 클릭하면 

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