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

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;