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

① react-scroll 설치

npm install --save react-scroll
yarn add 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 텍스트를 클릭하면

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

마치며

어제부터 하던 로그인 부분을 공부했다.
생각보다 작성할 것이 많아 당황하긴했지만 못해도 계속 코드를 보고 생각하다보니
먼가 이해가 되고 그렇게 어렵다고는 느껴지지 않았다.

일딴 이걸 안보고 작성하는 연습을 꾸준히 하고 왜 이렇게 작성했는지 계속 생각해야겠다.
프로젝트 지금 멈춘 상태이다. 머 썩 내키진 않지만 지금 이 시간도 좋은거같다.
부족한 부분을 채우는 시간을 가지는거 같고 코딩을 보고 생각하면 하나하나 직접 짜보는 연습을
하다보니 확실히 잘 와닿는거같다.

전엔 어떻게 작성해야되는지 전혀 감을 못잡아 그냥 무의미하게 시간만 보낸거 같은데
지금 이방법이 훨씬 이해가 잘되고 와닿는거같다.
(사실 그전에 헤매는 시간들이 합쳐진 것도 있겠지... 부정하진않는다.)

꾸준히하자 몰라고 계속 보고 생각해보자 정 모르겠으면 질문하자
환경은 충분히 조성 되있다. 지금 내게 주어진 이좋은 환경을 최대한 이용하자
진짜 코딩을 하기위해 사람들이 모이는 공간이 어디 흔한가?

계속해서 모든 기능에 대해 궁금증을 가지고 꾸준히 생각하고
작성해보자 처음은 그저 따라 치는거겠지만 계속 보고 생각하다보면 결국 보이게되고
이해하면 작성도 할수있을꺼라 믿는다. 하나의 과정이다

힘내자 얼마 안남았다 내가 주어진 이 귀한 시간을 잘 활용하자
나를 믿는 모든 사람들을 위해서도 정신 차리고 꾸준히 하자