반응형
https://www.npmjs.com/package/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 텍스트를 클릭하면
왼쪽에 있는 해당 영역으로 잘 이동한다
반응형
'React&React-Native > React' 카테고리의 다른 글
[#. React] jest를 이용해서 test 하기 (0) | 2021.11.29 |
---|---|
[#. React] React 기본 실행 3000 port 변경하기 (0) | 2021.07.08 |
[#. React] React Form에서 Enter 엔터키 눌렀을 때 버튼 클릭 이벤트 실행하기 (0) | 2021.06.15 |
[#. React] React에서 file, json data를 같이 formData에 넣어서 REST API에 post 하기 (0) | 2021.06.07 |
[#. React] parent에서 버튼 클릭할 때마다 children에서 div 영역 생성하기 (2) | 2021.05.25 |