[React] react-fullpage 라이브러리 (fullpage scroll)

Fullpage(One Page) Scroll 이란?

fullpage, fullscreen 등등 다양한 이름이 많은데 fullpage.js 가 가장 유명하다. (이건 라이센스 사용하려면 돈내야함)

스크롤을 하면 페이지 단위로 화면이 스크롤 된다.

 

대표적으로 배달의 민족 사이트가 있다.

https://www.baemin.com/

대한민국 1등 배달앱, 배달의민족

 

스크롤을 내릴때마다 화면이 바뀌면서 다른 페이지가 나와서 직관적이고 깔끔해보여서 유료가 아닌 무료로 쓰는 방법을 찾다 보니 npm에서 react-fullpage 라는 라이브러리가 있다는 걸 알게 되었다.

그래서 바로 적용해보고 추후 포토폴리오에서도 써보고 싶어 기록하게 되었다.

 

 

 

 

 

 

 

설치하기

$ npm install --save react-fullpage

 

 

 

 

 

 

공식 문서의 예제

import React from 'react';
import { FullPage, Slide } from 'react-full-page';

export default class FullPageExample extends React.Component {
  render() {
    return (
      <FullPage controls>
        <Slide>
          <h1>Inner slide content</h1>
        </Slide>
        <Slide>
          <h1>Another slide content</h1>
        </Slide>
      </FullPage>
    );
  }
});

공식 문서의 demo를 살펴보면 클래스 컴포넌트로 구현되어 있어서 구글링 해보고 다른 사람들의 코드를 참고하여

함수형 컴포넌트로 다르게 구현해봤다.

 

 

 

 

 

 

내가 실제로 적용한 예제

import { SectionsContainer, Section } from "react-fullpage";

export default function MainPage() {
 let options = {
    anchors: [
      "sectionOne",
      "sectionTwo",
      "sectionThree",
      "sectionFour",
    ],
  };

  return (
  <SectionsContainer {...options}>
    <Section>Page 1</Section>
    <Section>Page 2</Section>
    <Section>Page 3</Section>
    <Section>Page 4</Section>
  </SectionsContainer>
);
}

이건 프로젝트에 적용하기 전의 예제라서 그냥 페이지 넘어가는 걸 확인해보고자 글자만 써서 확인하고 실행시켜봤다.

다행히 내가 원하는 대로 적용 완료!

 

스크롤을 내리면 page 숫자가 바뀐다 (옆의 dots도 바뀜)

 

 

 

 

 

 

 

options

let options = {
  activeClass:          'active', // the class that is appended to the sections links
  anchors:              [], // the anchors for each sections
  arrowNavigation:      true, // use arrow keys
  className:            'SectionContainer', // the class name for the section container
  delay:                1000, // the scroll animation speed
  navigation:           true, // use dots navigatio
  scrollBar:            false, // use the browser default scrollbar
  sectionClassName:     'Section', // the section class name
  sectionPaddingTop:    '0', // the section top padding
  sectionPaddingBottom: '0', // the section bottom padding
  verticalAlign:        false // align the content of each section vertical
};

다른 부분들은 기본값으로 둬도 별 영향이 없지만, anchors 부분을 작성해 주지 않았더니 오류가 생겼다.

예시를 보면 section이 4개가 있기 때문에 anchors로 4개가 있다는 걸 알려줘야 했다. (=4페이지와 동일한 의미)

 

 

 

 

 

 

 

공식문서 보러가기

https://www.npmjs.com/package/react-full-page?activeTab=readme 

react-full-page

 

 

 

 

 

 

 

 

 

 

---

이상하게 공식문서에 나온 예제를 그대로 따라해보니 Fullpage 가 오류가 났었다. 뭘까...? 아직 이유는 찾지 못했

아무튼 그래서 구글링해서 다른 사람들이 적용한 예시를 비슷하게 구현하니까 제대로 구현되더라...ㅎ

 

사실 이것보다는 fullPage.js 라는 전체화면 스크롤이 더 예쁘고 custom이 쉬워보이긴 하지만 그건 유료와 무료 구분이 힘들어서 우선은 이 라이브러리로 구현해보고 있다.

 

next.js 강의 들어야 했는데 갑자기 여기에 꽂혀서 오전~오후 시간을 내내 여기에 쏟은 기분이다ㅋㅋㅋㅋ

뭔가 전체 화면이 스크롤 되는 게 포토폴리오 만들 때 사용하면 딱 좋을 것 같은 느낌...?

아무튼! 이런 기능도 있다는 걸 알게 되어서 오랜만에 재미있게 구현해본 듯 하다.