[Portfolio] React | React-scroll 을 이용해서 원하는 영역으로 이동

오늘은 React-scroll을 이용하여 원하는 영역으로 부드럽게 이동하는 동작을 구현해 보겠다.

 

포폴 사이트는 원페이지로 구성되어 있기 때문에 헤더의 각 항목들을 눌렀을 때, 하나의 페이지에서 나뉘어진 영역을 부드럽게 이동하고 싶었다. 

헤더의 각항목을 About Me, Archiving등 각 항목을 클릭하면 해당 영역으로 이동!

 

 

💡React-scroll?
  -  

 

 

1️⃣ React-scroll 설치

1. npm의 경우,

   npm install --save react-scroll​

2. yarn의 경우,

   yarn add react-scroll​

 

2️⃣ Header 항목 버튼들이 있는 컴포넌트

• import { Link } from 'react-scroll' 을 맨 위에 import 해준 후, 
• 각 항목마다 Link를 걸어준다. 
• 여기서 smooth 옵션은 각 항목을 클릭했을 때 부드럽게 영역을 이동할 수 있게 해줌!
• to="" 속성은 3번째 단계에서 각 영역 컴포넌트 마다 id을 지정해줄 텐데, 해당 id과 일치하는 영역으로 이동하게 해준다.

import React from 'react'
import styled from 'styled-components'
import { Link } from 'react-scroll'

const Buttons = styled.div`
// 생략
`

const Click = styled.button`
// 생략

`

function HeaderButtons() {
    return (
        <Buttons>
            <Link to='AboutMe' spy={true} smooth={true}>
                <Click>
                    About Me
                </Click>
            </Link>
            <Link to='Archiving' spy={true} smooth={true}> 
                <Click>
                    Archiving
                </Click>
            </Link>
            <Link to='Skills' spy={true} smooth={true}> 
                <Click>
                    Skills
                </Click>
            </Link>
            <Link to='Projects' spy={true} smooth={true}>
                <Click>
                    Projects
                </Click>
            </Link>
            <Link to='Contact' spy={true} smooth={true}>
                <Click>
                    Contact
                </Click>
            </Link> 
        </Buttons>
    )
}

export default HeaderButtons

 

 

3️⃣ 영역들의 id 설정

import React from 'react'
import Banner from './templates/Banner'
import AboutMe from './templates/AboutMe'
import Archiving from './templates/Archiving'
import Skills from './templates/Skills'
import Projects from './templates/Projects'
import Contact from './templates/Contact'
import styled from 'styled-components'


const Box = styled.div`
position: relative;
`

function Page() {

    return (
        <>
        <Box>
            <Banner />
            <div id='AboutMe'>
                <AboutMe />
            </div>
            <div id='Archiving'>
                <Archiving />
            </div>
            <div id='Skills'>
                <Skills />
            </div>
            <div id='Projects'>
                <Projects />
            </div>
            <div id='Contact'>
                <Contact />
            </div>
            </Box>
        </>
    )
}

export default Page

 

 

4️⃣ header와 page를 포함하는 가장 상단의 컴포넌트 (App.js)

• 이미 어느정도 개발된 사이트라 헤더 영역이동 외의 다른 컴포넌트들도 있는점 참고바람..!

import React from 'react';
import './App.css';
import Header from './components/templates/Header'
import Page from './components/Page';
import ModalBox from './components/templates/ProjectModal'
import { ModalContext } from "./context/modalContext";

function App() {
  return (
  <>
  <ModalContext>
      <Header />
      <Page />
      <ModalBox />
  </ModalContext>
  </>
  )
}

export default App;

 

 

🎃 구현완료!

(초반에는 빠르게 넘어갔는데 컴터가 느려진건지.. 느릿느릿 이동하는 영역들,,,ㅋ)