react-joyride는 React 애플리케이션에서 인터랙티브한 온보딩 가이드를 만들 수 있도록 도와주는 라이브러리입니다. 사용자는 이 도구를 활용해 웹 앱의 특정 요소를 단계별로 설명하고, 사용자가 쉽게 앱의 기능을 익히도록 도울 수 있습니다.

React Joyride Demo

✅ 주요 특징

• 단계별 안내(steps): 각 단계마다 특정 DOM 요소를 강조하고 설명을 표시
• 사용자 상호작용 기반 진행: 버튼 클릭, 다음/이전, 닫기 등 다양한 조작 가능
• 커스터마이징 가능: 스타일, 텍스트, 콜백 등 원하는 대로 조정 가능
• 멀티 페이지, SPA 모두 지원

🔧 설치 방법

bash
복사편집
npm install react-joyride
# 또는
yarn add react-joyride

🧩 기본 사용법

tsx
복사편집
import React from "react";
import Joyride from "react-joyride";

const App = () => {
  return (
    <Joyridesteps={[
        {
          target: ".my-first-step",
          content: "이 버튼은 클릭하면 시작됩니다!",
        },
        {
          target: ".my-second-step",
          content: "여기에서 설정을 바꿀 수 있어요.",
        },
      ]}
      continuous={true}
      showProgress={true}
      showSkipButton={true}
    />
  );
};

🔍 주요 Props