빠른 시작

작업 세 개로 바로 편집할 수 있는 차트를 만들어 봐요. 편집 결과는 React 상태에 반영하므로, 실제 데이터를 연결하기 전에 작업을 옮기며 동작을 확인할 수 있어요.

패키지 설치Copy Anchor Link

react와 react-dom이 설치된 React 18 또는 19 앱에서 시작해요.

pnpm add @jaeungkim/gantt-chart

다른 패키지 매니저를 사용한다면 npm install @jaeungkim/gantt-chart 또는 yarn add @jaeungkim/gantt-chart를 실행하면 돼요.

차트 추가Copy Anchor Link

아래 예제로 ProjectChart.tsx를 만들고 앱에서 <ProjectChart />를 렌더링해요. 차트의 레이아웃과 스타일을 적용하려면 예제의 스타일시트도 꼭 불러와야 해요.

import { useState } from 'react';
import { ReactGanttChart, type Task } from '@jaeungkim/gantt-chart';
import '@jaeungkim/gantt-chart/style.css';

const initialTasks: Task[] = [
  {
    id: 'design',
    name: 'Design',
    startDate: '2026-03-02',
    endDate: '2026-03-06',
    parentId: null,
    sequence: '1',
    progress: 100,
  },
  {
    id: 'build',
    name: 'Build',
    startDate: '2026-03-09',
    endDate: '2026-03-20',
    parentId: null,
    sequence: '2',
    progress: 40,
    dependencies: [{ targetId: 'design', type: 'FS' }],
  },
  {
    id: 'review',
    name: 'Review',
    startDate: '2026-03-23',
    endDate: '2026-03-27',
    parentId: null,
    sequence: '3',
    progress: 0,
  },
];

export function ProjectChart() {
  const [tasks, setTasks] = useState<Task[]>(initialTasks);

  return (
    <ReactGanttChart
      tasks={tasks}
      onTasksChange={setTasks}
      showTaskList
      height={420}
    />
  );
}

왼쪽 패널에는 작업 이름이 나타나요. 막대는 작업 기간을 보여 주고, 화살표는 Design과 Build를 연결해요. showTaskList는 왼쪽 패널을 켜고, height는 차트 높이를 정해요.

예제에는 작업에 필요한 여섯 필드가 모두 들어 있어요. parentId: null은 상위 작업이 없다는 뜻이고, sequence는 표시 순서를 정해요. 실제 데이터를 연결할 때는 작업 데이터를 참고하면 돼요.

앱을 실행해 결과를 확인해요. 왼쪽 패널에 Design, Build, Review 세 이름이 보이고 날짜 그리드 위에는 막대 세 개와 Design에서 Build로 이어지는 화살표가 나타나요. 스타일이 없는 텍스트만 보이면 스타일시트를 불러왔는지 먼저 확인하세요.

직접 편집해 보기Copy Anchor Link

1. Build 막대를 좌우로 끌어서 작업 날짜를 옮겨 봐요.
2. 막대의 양쪽 끝을 끌어서 작업 기간을 바꿔 봐요.
3. Build 안의 진행률 핸들을 끌어서 완료 비율을 바꿔 봐요.
4. Build에 마우스를 올린 뒤, 오른쪽 연결점을 Review로 끌어서 의존성을 추가해 봐요.

예제에서는 이 편집 기능을 바로 사용할 수 있어요. 허용할 편집을 정하는 방법은 작업 편집에 있어요. 연결 유형과 일정에 미치는 영향은 의존성에서 다뤄요.

편집 결과 반영Copy Anchor Link

onTasksChange={setTasks}는 편집이 확정되면 갱신된 작업 배열 전체를 React 상태에 반영해요. 그 상태를 다시 tasks로 넘기면 차트와 앱이 같은 데이터를 사용해요.

예제의 편집 결과는 컴포넌트가 마운트된 동안만 유지돼요. 새로고침 후에도 유지하려면 앱의 저장소나 API를 연결하고 저장 오류도 앱에서 처리해야 해요. 차트가 데이터를 직접 저장하지는 않아요. 콜백 흐름은 이벤트에서 확인할 수 있어요.

예제 확장Copy Anchor Link

다음으로 필요한 가이드를 골라 보세요.

• 작업 데이터: 실제 작업 데이터를 연결하고 날짜를 읽는 방식을 확인해요.
• 작업 목록과 계층: 작업을 프로젝트 단계별로 묶어요.
• 작업 생성: 새 작업을 추가해요.
• 근무일 달력: 드래그할 때 주말과 휴일을 반영해요.
• 테마: 앱에 맞게 색상을 바꿔요.
• 명령형 API: 배율 선택기나 오늘 이동 버튼을 추가해요.
• GanttProps: 컴포넌트 옵션을 찾아봐요.

더 많은 옵션을 직접 바꿔 보려면 플레이그라운드를 열어 봐요.