오늘은 React-scroll을 이용하여 원하는 영역으로 부드럽게 이동하는 동작을 구현해 보겠다.
포폴 사이트는 원페이지로 구성되어 있기 때문에 헤더의 각 항목들을 눌렀을 때, 하나의 페이지에서 나뉘어진 영역을 부드럽게 이동하고 싶었다.
💡React-scroll?
-
1️⃣ React-scroll 설치
- npm의 경우,
npm install --save react-scroll
- 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;
🎃 구현완료!
(초반에는 빠르게 넘어갔는데 컴터가 느려진건지.. 느릿느릿 이동하는 영역들,,,ㅋ)
'Project Memoir > Portfolio (2022)' 카테고리의 다른 글
[Portfolio] Github 으로 React 프로젝트 호스팅하기 (0) | 2022.01.14 |
---|---|
[Portfolio] React | Aos를 사용하여 애니메이션 효과 주기 (0) | 2022.01.12 |
[Portfolio] React | ContextAPI를 이용한 Modal창 구현 (0) | 2022.01.06 |
[Portfolio] React | react-slick으로 carousel 구현하기 (0) | 2022.01.05 |
[Portfolio] 포트폴리오를 만들어보자! (0) | 2022.01.04 |