Click

클릭 이벤트(type="onClick")를 위한 DOMEvent의 특수 버전입니다.

import { createTracker } from "@offlegacy/event-tracker";

const [Track] = createTracker({
  DOMEvents: {
    onClick: (params, context) => {
      // 클릭 이벤트 처리
    },
  },
});

function App() {
  return (
    <Track.Provider initialContext={{}}>
      <Track.Click params={{ buttonId: "submit" }}>
        <button>Submit</button>
      </Track.Click>
    </Track.Provider>
  );
}

Props

스키마와 함께 사용하는 경우
- params: SchemaParams | (context: Context) => SchemaParams - 스키마 기반 클릭 이벤트 매개변수
- schema: string - 이벤트 매개변수 검증을 위한 스키마 이름
스키마와 함께 사용하지 않는 경우
- params: EventParams | (context: Context) => EventParams - 클릭 이벤트 매개변수
enabled?: boolean | ((context: Context, params: EventParams) => boolean) - 이벤트 추적을 조건부로 활성화/비활성화 (기본값: true)
debounce?: DebounceConfig - 연속적인 이벤트 발생을 방지하는 디바운스 설정
throttle?: ThrottleConfig - 이벤트 발생 빈도를 제한하는 스로틀 설정

참고: debounce와 throttle은 상호 배타적이며 함께 사용할 수 없습니다.

추적 옵션 예제

조건부 추적

<Track.Click params={{ buttonId: "premium-feature" }} enabled={(context, params) => context.user?.isPremium}>
  <button>프리미엄 기능</button>
</Track.Click>

디바운스 추적

<Track.Click params={{ buttonId: "search" }} debounce={{ delay: 300, leading: false, trailing: true }}>
  <button>검색</button>
</Track.Click>

스로틀 추적

<Track.Click params={{ buttonId: "rapid-action" }} throttle={{ delay: 1000, leading: true, trailing: false }}>
  <button>빠른 액션</button>
</Track.Click>

이벤트 이름을 변경한 경우

eventName 속성을 사용하면 사용자 정의 클릭 이벤트 핸들러 이름을 지정할 수 있습니다.
이 속성을 사용하면 핸들러 이름이 변경되어도 유연하게 대처할 수 있습니다.

function MyButton({ onButtonClick }: { onButtonClick?: () => void }) {
  return <button onClick={onButtonClick} />;
}

function App() {
  return (
    <Track.Provider initialContext={{}}>
      <Track.Click type="onFocus" params={{...}} eventName="onButtonClick">
        <MyButton />
      </Track.Click>
    </Track.Provider>
  );
}

FilesExpand file tree

click.mdx

Latest commit

History