Hackle

@teamsparta/hackle에서 제공하는 Hackle A/B 테스트 및 원격 설정 통합 패키지입니다. Suspense를 기본 지원합니다.

이 패키지는 @hackler/react-sdk를 래핑하여 Suspense 패턴을 제공합니다.

---

useSuspenseVariation

Hackle A/B 테스트의 variation을 Suspense와 함께 가져오는 훅입니다.

API

type Variation = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J';

interface UseSuspenseVariationOptions {
  experimentKey: number;
}

// 내부 타입 (패키지 entry point에서 export되지 않음)
interface UseSuspenseVariationResult {
  variation: Variation;
}

function useSuspenseVariation(
  options: UseSuspenseVariationOptions
): UseSuspenseVariationResult;

사용 예시

import { useSuspenseVariation } from '@teamsparta/hackle';
import { Suspense } from 'react';

function ABTestComponent() {
  const { variation } = useSuspenseVariation({ experimentKey: 42 });

  if (variation === 'A') return <OriginalUI />;
  return <NewUI />;
}

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <ABTestComponent />
    </Suspense>
  );
}

---

SuspenseVariation

A/B 테스트 variation을 Suspense와 함께 렌더 프롭 패턴으로 제공하는 컴포넌트입니다.

API

interface SuspenseVariationProps {
  experimentKey: number;
  children: (props: UseSuspenseVariationResult) => ReactNode;
}

function SuspenseVariation(props: SuspenseVariationProps): ReactElement;

사용 예시

import { SuspenseVariation } from '@teamsparta/hackle';

<Suspense fallback={<Loading />}>
  <SuspenseVariation experimentKey={42}>
    {({ variation }) => (
      variation === 'A' ? <OriginalUI /> : <NewUI />
    )}
  </SuspenseVariation>
</Suspense>

---

useSuspenseRemoteConfig

Hackle 원격 설정 값을 Suspense와 함께 가져오는 훅입니다. JSON 문자열 자동 파싱을 지원합니다.

API

// 내부 타입 (패키지 entry point에서 export되지 않음)
type RemoteConfigValue = string | number | boolean | Record<string, unknown>;

interface UseSuspenseRemoteConfigOptions<T> {
  key: string;
  preprocess?: (value: string | number | boolean) => T;
  defaultValue?: T;
}

type UseSuspenseRemoteConfigResult<T> = {
  data: T;
};

function useSuspenseRemoteConfig<T extends RemoteConfigValue>(
  options: UseSuspenseRemoteConfigOptions<T>
): UseSuspenseRemoteConfigResult<T>;

• preprocess 기본 동작: JSON 문자열은 자동 파싱, 숫자/불리언은 그대로 반환
• defaultValue 미지정 시 원격 설정 값이 없으면 에러를 throw

사용 예시

import { useSuspenseRemoteConfig } from '@teamsparta/hackle';

function FeatureFlag() {
  const { data: config } = useSuspenseRemoteConfig<{ enabled: boolean }>({
    key: 'new-feature-config',
  });

  if (!config.enabled) return null;
  return <NewFeature />;
}

// 기본값 제공
function Banner() {
  const { data } = useSuspenseRemoteConfig<string>({
    key: 'banner-text',
    defaultValue: '기본 배너',
  });

  return <div>{data}</div>;
}

---

SuspenseRemoteConfig

원격 설정 값을 Suspense와 함께 렌더 프롭 패턴으로 제공하는 컴포넌트입니다.

API

interface SuspenseRemoteConfigProps<T> {
  remoteConfigKey: string;
  preprocess?: (value: string | number | boolean) => T;
  defaultValue?: T;
  children: (props: UseSuspenseRemoteConfigResult<T>) => ReactNode;
}

function SuspenseRemoteConfig<T extends RemoteConfigValue>(
  props: SuspenseRemoteConfigProps<T>
): ReactElement;

사용 예시

import { SuspenseRemoteConfig } from '@teamsparta/hackle';

<Suspense fallback={<Loading />}>
  <SuspenseRemoteConfig<string> remoteConfigKey="feature-flag">
    {({ data }) => <div>{data}</div>}
  </SuspenseRemoteConfig>
</Suspense>