연동 / React 연동

React 연동

컴포넌트 패턴으로 안전하게 붙입니다.

권장 패턴

init은 마운트 시 최초 1회만 호출합니다 (SDK는 싱글턴).
유저 변경은 lillo:userLoggedIn 이벤트 디스패치로, 로그아웃은 lilloSDK.logout()으로 처리합니다.

콘솔의 버튼 설치 > React 탭에서 복사해 쓰는 LilloChat 컴포넌트를 제공합니다 — 최초 1회 init, 유저 변경은 이벤트/로그아웃으로 처리합니다.

권장 패턴 — useEffect

useEffect(() => {
  if (!window.LilloSDK) return;
  window.lilloSDK = window.LilloSDK.init({ host, chatAppUrl, clientKey });
}, []);

useEffect(() => {
  if (user) {
    window.dispatchEvent(
      new CustomEvent('lillo:userLoggedIn', { detail: user })
    );
  } else {
    window.lilloSDK?.logout();
  }
}, [user]);