[Next.js] React Vertical Timeline 사용설명서

이광호·2024년 4월 14일
Reactnext.js

Next.js

목록 보기
1/1

1. 계기

Next.js 14버전으로 개발중인 포트폴리오 사이트에 소개란을 만들 때 유용한 UI들 중에서
깃허브 공식 홈페이지에서 사용된 Timeline 디자인이 꽤나 마음에 들었다.

실제로 Timeline 디자인을 구현할 수도 있었지만 아직까지는 그정도 실력이 되지 않기 때문에 현재 존재하는 패키지 중에서 React Vertical Timeline를 사용하기로 했다.

그러나 해당 패키지의 경우
document가 깔끔하게 정리되어 있지 않으며, 한글로 정리되어 있는 글도 제대로 없어서
스스로 블로그에 정리해보기로 마음 먹었다!!

2. 사용하기에 앞서서..

React Vertical Timeline Document -> 해당 글은 위 공식문서를 기반으로 작성하였다

가장 먼저 document를 보면서 확인했던 것은 다른 패키지들과의 의존성 문제가 없는지였다.
다행히도 큰 문제점은 발견되지 않았다.

그다음으로 확인하고 싶었던 점은 Demo였다.
위 공식문서를 통해 확인할 수 있었던 Demo는 크게 3가지로 나눌 수 있었다

  • 왼쪽으로 정렬된 Timeline

  • 오른쪽으로 정렬된 Timeline

  • 가운데에 위치해 있으며 양쪽 모두 변경 가능한 Timeline
    해당 사진이 내가 원했던 형태의 디자인이었기에 위 패키지를 사용하기로 결심했다

이외에도 스크롤이나 버튼 클릭을 통해 데이터 로드를 실행하여 더 많은 Timeline을 불러오거나 라인의 색, 형태를 바꾸는 등의 작업이 가능했기에 사용하기에 편리하다고 생각했다.

3. 사용법

사용법을 알아보기 위해 코드를 보고 싶었으나
이 공식 문서가 불친절하다고 느꼈던 이유 중 하나가 Demo 별로 코드를 보여주는 것이 아닌
오직 하나의 Demo에 대해서만 코드를 제공해줬다.
따라서 위 커스텀 컴퍼넌트를 잘 다루기 위해선 해당 패키지가 제공하는 props를 꿰뚫고 있어야 한다.

근데 공식 문서를 보면 알겠지만....
양이 생각보다 방대하다...
그래도 일단 열심히 정리해보자!

3-1. 컴퍼넌트의 구성

그전에 컴퍼넌트의 구성 형식에 대해서 알아보자
컴퍼넌트는 크게 2가지로 나뉜다

  1. VerticalTimeline 컴퍼넌트
  • 해당 컴퍼넌트를 통해 타임라인을 생성할 수 있다
  • 위 컴퍼넌트는 타임라인의 뼈대 역할을 한다
  1. VerticalTimelineElement 컴퍼넌트
  • 해당 컴퍼넌트를 통해 각 타임라인의 요소를 생성할 수 있다
  • 위 컴퍼넌트는 타임라인의 개별 항목 역할을 한다
import {VerticalTimeline, VerticalTimelineElement} from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';

<VerticalTimeline>
    <VerticalTimelineElement
        className="vertical-timeline-element--work"
        date="2011 - present"
        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
    >
        <h3 className="vertical-timeline-element-title">Creative Director</h3>
        <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
        <p>
        Creative Direction, User Experience, Visual Design, Project Management,
        Team Leading
        </p>
    </VerticalTimelineElement>
</VerticalTimeline>

3-2. 커스터마이징

반응형 세로 타임라인의 구성 요소를 사용자의 마음대로 커스터마이징할 수 있다.
지금부턴 어떤 요소들을 커스터마이징할 수 있는지 확인해보자.

3-2-1. VerticalTimeline Props

animate

  • 요소에 대한 애니메이션을 활성화 또는 비활성화함
  • 기본값은 true

className

  • 루트 div 요소에 추가 클래스 이름을 추가함

    layout

  • '1-column-left' 또는 '1-column-right' 또는 '2-columns' 중에서 선택함

  • 기본값은 '2-columns'

    lineColor

  • 타임라인의 색상을 선택함

  • 기본값은 'white'

    3-2-2. VerticalTimelineElement Props

    className

  • 루트 div 요소에 추가 클래스 이름을 추가함

    contentArrowStyle

  • 콘텐츠 화살표 div 요소에 대한 추가 스타일을 추가함

    contentStyle

  • 콘텐츠 div요소에 추가 스타일을 추가함

    date

  • 요소의 날짜임

    dateClassName

  • 요소의 날짜에 추가 클래스 이름을 추가함

    icon

  • 요소의 아이콘임

    iconClassName

  • 요소의 아이콘에 추가 클래스 이름을 추가함

    iconOnClick

  • 요소의 아이콘의 onClick 핸들러임

    iconStyle

  • 요소의 아이콘 스타일임

    position

  • 요소의 위치 (왼쪽 또는 오른쪽)

    style

  • 루트 div 요소에 추가 스타일을 추가함

    textClassName

  • 텍스트 컨테이너에 추가 클래스 이름을 추가함

profile
이광호
성장이 재밌는 개발자

0개의 댓글