React-scroll 사용법 - React-scroll sayongbeob

//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;