react-vertical-timeline-component란?

웹 사이트, 웹 애플리케이션에서 이벤트, 개발 이력, 프로젝트 이력, 회사의 마일스톤 등을 시간 순서대로 나열할 때 사용하는 컴포넌트입니다.

특징

1. 재사용, 확장, 유지 관리가 쉽습니다.

2. 사용자의 입력이나 외부 데이터에 따라 동적으로 내용을 업데이트 할 수 있습니다.

 

설치

• react-vertical-timeline-component를 설치하기 위해 npm이나 yarn을 사용할 수 있으며, 이 패키지는 React 프로젝트에 세로 타임라인을 추가하는 데 사용됩니다.
• 설치 전에 React가 이미 프로젝트에 설치되어 있어야 하며, React 프로젝트가 아직 없다면 create-react-app을 사용해 프로젝트를 생성해야 합니다.
• 패키지를 사용할 때는 항상 업데이트를 확인하고, 필요한 경우 패키지를 업데이트하거나 변경 사항을 프로젝트에 적용해야 합니다.

 

npm i react-vertical-timeline-component

 

사용법

• VerticalTimeline 및 VerticalTimelineElement 컴포넌트의 인스턴스 생성을 위해 먼저 해당 패키지를 불러와야 합니다.
• VerticalTimeline 컴포넌트는 타임라인의 뼈대를 생성하는 데 사용됩니다. 이를 통해 전체 타임라인의 구조를 만듭니다.
• VerticalTimelineElement 컴포넌트는 타임라인의 각 요소를 구성합니다. 이 컴포넌트는 날짜, 제목, 하위 텍스트 등 타임라인의 개별 항목을 포함합니다.
• 컴포넌트는 CSS-in-JS 방식을 사용하기 때문에, 커스텀 스타일을 적용하려면 패키지의 기본 스타일을 재정의해야 합니다.
• 이 패키지를 사용하기 전에, 사용 중인 React의 버전이 패키지와 호환되는지 확인해야 합니다.

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>

 

예시

react-vertical-timeline-component를 사용하면 시간 순서에 따른 이벤트의 시각적 타임라인을 생성할 수 있으며, 이 과정에서 VerticalTimeline과 VerticalTimelineElement가 주요 구성 요소로 활용됩니다.

• VerticalTimeline은 타임라인의 컨테이너로, 타임라인의 레이아웃과 색상을 설정하는 데 사용됩니다. 예를 들어, layout prop을 '1-column-left'로 설정하여 타임라인의 레이아웃을 정의하고, lineColor prop으로 타임라인의 색상을 지정할 수 있습니다.

• VerticalTimelineElement는 개별 타임라인 이벤트를 나타내며, 여러 props를 통해 커스터마이징할 수 있습니다. 주요 props에는 이벤트의 CSS 클래스(className), 컨텐츠 박스와 화살표의 스타일(contentStyle 및 contentArrowStyle), 이벤트 날짜(date), 아이콘 스타일 및 아이콘(iconStyle 및 icon)이 포함됩니다. 예시에서는 react-icons/fa 라이브러리에서 가져온 아이콘을 사용하였습니다.

각 VerticalTimelineElement는 날짜, 제목, 부제목, 설명을 포함하며, 아이콘과 컨텐츠의 스타일을 사용자 정의할 수 있습니다. 이를 통해 사용자는 한눈에 이벤트의 시간과 세부 사항을 파악할 수 있습니다.

react-vertical-timeline-component는 웹사이트에서 시간 순서대로 이벤트나 정보를 시각적으로 표현하는 데 매우 유용합니다, 사용자에게 정보를 명확하고 직관적으로 전달할 수 있는 방법을 제공합니다.

import React from 'react'

import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component'
import 'react-vertical-timeline-component/style.min.css'
import { FaAws, FaYoutube, FaDiscord } from 'react-icons/fa6'

function Timeline() {
    return (
        <div>
            <VerticalTimeline layout="1-column-left" lineColor="#FFFFFF">
                <VerticalTimelineElement className="vertical-timeline-element--work"
                    contentStyle={{ background: '#FF0000', color: '#FFFFFF' }}
                    contentArrowStyle={{ borderRight: '7px solid  #FF0000' }}
                    date="2020년 10월"
                    iconStyle={{ background: '#FF0000', color: '#FFFFFF' }}
                    icon={<FaYoutube />} >
                    <h3 className="vertical-timeline-element-title"> Youtube 챌린저 리플레이 서비스 시작 </h3>
                    <h4 className="vertical-timeline-element-subtitle"> cptkuk91, xodud3008 </h4>
                    <p>챌린저 리플레이 동영상 서비스를 시작</p>
                </VerticalTimelineElement>
            // 이하 생략...
            </VerticalTimeline>
        </div>
    )
}
export default Timeline