React Integration

React 애플리케이션에서 MSAP Chat SDK를 사용하는 방법을 안내합니다.

기본 사용

useEffect 훅을 사용하여 컴포넌트 마운트 시 초기화합니다.

import { useEffect, useRef } from 'react';

function App() {
  const widgetRef = useRef(null);

  useEffect(() => {
    // SDK 로드 확인
    if (window.MSAPChat) {
      widgetRef.current = window.MSAPChat.init({
        applicationKey: process.env.REACT_APP_CHAT_KEY,
      });
    }

    // 클린업
    return () => {
      if (widgetRef.current) {
        widgetRef.current.destroy();
      }
    };
  }, []);

  return (
    <div>
      <h1>My App</h1>
      <button onClick={() => widgetRef.current?.open()}>고객 지원</button>
    </div>
  );
}

export default App;

커스텀 훅 만들기

재사용 가능한 커스텀 훅으로 만들면 더 편리합니다.

useMSAPChat.js

import { useEffect, useRef } from 'react';

export function useMSAPChat(applicationKey) {
  const widgetRef = useRef(null);

  useEffect(() => {
    if (window.MSAPChat && !widgetRef.current) {
      widgetRef.current = window.MSAPChat.init({
        applicationKey,
      });
    }

    return () => {
      if (widgetRef.current) {
        widgetRef.current.destroy();
        widgetRef.current = null;
      }
    };
  }, [applicationKey]);

  return widgetRef.current;
}

사용 예제

import { useMSAPChat } from './hooks/useMSAPChat';

function App() {
  const widget = useMSAPChat(process.env.REACT_APP_CHAT_KEY);

  return (
    <div>
      <h1>My App</h1>
      <button onClick={() => widget?.open()}>채팅 열기</button>
      <button onClick={() => widget?.close()}>채팅 닫기</button>
    </div>
  );
}

TypeScript 지원

먼저 설치 문서의 TypeScript 타입 안내에 따라 msap-ai-chat.d.ts를 src/types/msap-ai-chat.d.ts로 복사합니다. 아래 예시는 src/App.tsx에서 사용하는 경우입니다.

import { useEffect, useRef } from 'react';

function App() {
  const widgetRef = useRef<MSAPChat.Instance | null>(null);

  useEffect(() => {
    if (window.MSAPChat) {
      widgetRef.current = window.MSAPChat.init({
        applicationKey: process.env.REACT_APP_CHAT_KEY!,
      });
    }

    return () => {
      widgetRef.current?.destroy();
      widgetRef.current = null;
    };
  }, []);

  return <button onClick={() => widgetRef.current?.open()}>고객 지원</button>;
}

Context API와 함께 사용

전역적으로 위젯을 관리하려면 Context API를 사용하세요.

ChatContext.jsx

import { createContext, useContext, useEffect, useRef } from 'react';

const ChatContext = createContext(null);

export function ChatProvider({ children, applicationKey }) {
  const widgetRef = useRef(null);

  useEffect(() => {
    if (window.MSAPChat && !widgetRef.current) {
      widgetRef.current = window.MSAPChat.init({
        applicationKey,
      });
    }

    return () => {
      if (widgetRef.current) {
        widgetRef.current.destroy();
        widgetRef.current = null;
      }
    };
  }, [applicationKey]);

  return <ChatContext.Provider value={widgetRef.current}>{children}</ChatContext.Provider>;
}

export function useChat() {
  const context = useContext(ChatContext);
  if (!context) {
    throw new Error('useChat must be used within ChatProvider');
  }
  return context;
}

App.jsx

import { ChatProvider } from './context/ChatContext';
import SupportButton from './components/SupportButton';

function App() {
  return (
    <ChatProvider applicationKey={process.env.REACT_APP_CHAT_KEY}>
      <div>
        <h1>My App</h1>
        <SupportButton />
      </div>
    </ChatProvider>
  );
}

SupportButton.jsx

import { useChat } from '../context/ChatContext';

function SupportButton() {
  const chat = useChat();

  return <button onClick={() => chat?.open()}>고객 지원</button>;
}

Next.js에서 사용

Next.js에서는 클라이언트 컴포넌트로 만들어야 합니다.

'use client';

import { useEffect, useRef } from 'react';

export default function ChatWidget() {
  const widgetRef = useRef(null);

  useEffect(() => {
    if (typeof window !== 'undefined' && window.MSAPChat) {
      widgetRef.current = window.MSAPChat.init({
        applicationKey: process.env.NEXT_PUBLIC_CHAT_KEY,
      });
    }

    return () => {
      widgetRef.current?.destroy();
    };
  }, []);

  return null;
}

layout.js에 추가

import ChatWidget from './components/ChatWidget';

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <head>
        <script src="https://sdk.turacocloud.com/msap-ai-chat.min.js" />
      </head>
      <body>
        {children}
        <ChatWidget />
      </body>
    </html>
  );
}

다음 단계

• Vue Integration - Vue에서 사용하기
• API Methods - API 메서드
• Examples - 라이브 예제