SDK ์—ฐ๋™

๐Ÿ“˜

Hackle React Native SDK๋Š” React 16.8 ์ด์ƒ ๋ฐ React Native 0.64.1 ์ด์ƒ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

React Native SDK๋Š” Android SDK, iOS SDK ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.
์•„๋ž˜ OS๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

  • Android API 16 (4.1 Jelly Bean) ์ด์ƒ
  • iOS 10 ์ด์ƒ

1. ์˜์กด์„ฑ ์ถ”๊ฐ€

๐Ÿšง

SDK ์„ค์น˜/์—…๋ฐ์ดํŠธ ํ›„ ์•ฑ์„ ์ƒˆ๋กญ๊ฒŒ ๋นŒ๋“œํ•ด์•ผ ์—ฐ๋™์ด ๋ณ€๊ฒฝ์‚ฌํ•ญ์ด ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

npm install --save @hackler/react-native-sdk
yarn add @hackler/react-native-sdk

iOS

cd ios
pod install

Expo ์‚ฌ์šฉ ์‹œ ์˜์กด์„ฑ ์ถ”๊ฐ€

React Native SDK 3.17.0 ์ด์ƒ ๋ฒ„์ „์—์„œ Expo๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
โ—๏ธ

React Native SDK๋Š” Expo Go ํ™˜๊ฒฝ์„ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. expo prebuild ๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”.

npm install --save @hackler/react-native-sdk
yarn add @hackler/react-native-sdk

expo ์‚ฌ์šฉ ์‹œ์—๋Š” link๋‚˜ pod install์€ ์‹คํ–‰ํ•˜์ง€ ์•Š์•„๋„ ๋ฌด๋ฐฉํ•ฉ๋‹ˆ๋‹ค.


์•ˆ๋“œ๋กœ์ด๋“œ ์„ค์ •

๐Ÿšง

React Native SDK 3.25.0 ์ดํ•˜ ๋ฒ„์ „

React Native SDK 3.26.0 ์ด์ƒ ๋ฒ„์ „๋ถ€ํ„ฐ๋Š” ์•„๋ž˜ ์„ค์ •์ด ์ž๋™์œผ๋กœ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด ๋‹จ๊ณ„๋ฅผ ๊ฑด๋„ˆ๋›ฐ๊ณ  ๋‹ค์Œ์œผ๋กœ ์ง„ํ–‰ํ•ด ์ฃผ์„ธ์š”. 3.25.0 ์ดํ•˜ ๋ฒ„์ „์—์„œ๋Š” ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์ฐธ๊ณ ํ•ด์„œ registerActivityLifecycleCallbacks๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ์„ธ์š”.

์ƒ์„ฑ๋œ Application ํด๋ž˜์Šค๊ฐ€ ์—†๋‹ค๋ฉด ์ƒˆ๋กœ ์ƒ์„ฑํ•˜์—ฌ AndroidManifest.xml์— ๋“ฑ๋กํ•ด ์ฃผ์„ธ์š”.

Application ํด๋ž˜์Šค์— ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ onCreate ํ•จ์ˆ˜ ์•„๋ž˜ ์ถ”๊ฐ€ํ•ด ์ฃผ์„ธ์š”.

import android.app.Application;
import io.hackle.android.HackleApp;

public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    ...
    HackleApp.registerActivityLifecycleCallbacks(this);
    ...
  }
}
import android.app.Application
import io.hackle.android.Hackle
import io.hackle.android.registerActivityLifecycleCallbacks

class MyApplication : Application() {
  override fun onCreate() {
    super.onCreate()
    ...
    Hackle.registerActivityLifecycleCallbacks(this)
    ...
  }
}

2. SDK ์ดˆ๊ธฐํ™”

SDK๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ฐ˜๋“œ์‹œ createInstance()์— SDK ํ‚ค๋ฅผ ์ „๋‹ฌํ•˜์—ฌ HackleReactNativeSDKClient๋ฅผ ์ƒ์„ฑํ•˜๊ณ  React ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐ์‹ธ๋Š” HackleProvider์— ์ „๋‹ฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • SDK ํ‚ค๋Š” ํ•ตํด ์„œ๋น„์Šค์˜ ๋Œ€์‹œ๋ณด๋“œ ์•ˆ์— ์œ„์น˜ํ•œ SDK ์—ฐ๋™ ์ •๋ณด์—์„œ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ดˆ๊ธฐํ™” ๋‹จ๊ณ„์— ํ•ตํด ์„œ๋ฒ„์™€ ๋ฐ์ดํ„ฐ ๋™๊ธฐํ™”๋ฅผ ์œ„ํ•œ ํ†ต์‹ ์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์ด ์‹œ๊ฐ„์€ ์ˆ˜ ๋ฐ€๋ฆฌ ์ดˆ์— ๋ถˆ๊ณผํ•ฉ๋‹ˆ๋‹ค. ๋™๊ธฐํ™”๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด ์ฆ‰์‹œ ๋ Œ๋”๋ง์ด ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค.
import { createInstance, HackleProvider } from "@hackler/react-native-sdk";

// YOUR_APP_SDK_KEY ์ž๋ฆฌ์— SDK ํ‚ค๋ฅผ ๋„ฃ์Šต๋‹ˆ๋‹ค.
const hackleClient = createInstance("YOUR_APP_SDK_KEY");

const App = () => {
  return (
    <HackleProvider hackleClient={hackleClient}>
      <YourApp />
    </HackleProvider>
  );
};

์ดˆ๊ธฐํ™” ์„ค์ •์ •๋ณด

์„ค์ •์ •๋ณด๋ฅผ ํฌํ•จํ•˜์—ฌ SDK๋ฅผ ์ดˆ๊ธฐํ™” ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

import { createInstance, HackleProvider } from "@hackler/react-native-sdk";

const config = {
  debug: true
};

const hackleClient = createInstance("YOUR_APP_SDK_KEY", config);

const App = () => {
  return (
    <HackleProvider hackleClient={hackleClient}>
      <YourApp />
    </HackleProvider>
  );
};

์„ค์ •

๊ธฐ๋Šฅ

๊ธฐ๋ณธ๊ฐ’

์ง€์› ๋ฒ„์ „

exposureEventDedupIntervalMillis

๋™์ผํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ์—ฐ์†์œผ๋กœ ๋ฐœ์ƒ์‹œํ‚จ ๋™์ผํ•œ A/B ํ…Œ์ŠคํŠธ, ๊ธฐ๋Šฅํ”Œ๋ž˜๊ทธ ๋ถ„๋ฐฐ๊ฒฐ๊ณผ์— ๋Œ€ํ•œ ๋…ธ์ถœ ์ด๋ฒคํŠธ๋ฅผ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.

์ตœ์†Ÿ๊ฐ’: 1000 (1์ดˆ) ์ตœ๋Œ“๊ฐ’: 3600000 (1์‹œ๊ฐ„)

-1 (์ค‘๋ณต์ œ๊ฑฐ ํ•˜์ง€ ์•Š์Œ)

3.3.1+

debug

๋ชจ๋“  ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ๋กœ๊ทธ๋ฅผ ์ฝ˜์†”์— ์ถœ๋ ฅํ•˜๊ณ , ์ด๋ฒคํŠธ๋ฅผ ์ฆ‰์‹œ ์ „์†กํ•ฉ๋‹ˆ๋‹ค.

false

3.4.1+

pollingIntervalMillis

๋Œ€์‹œ๋ณด๋“œ์—์„œ ์„ค์ •ํ•œ ์ •๋ณด๋ฅผ ์ฃผ๊ธฐ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ตœ์†Ÿ๊ฐ’ : 60000 (60์ดˆ)

-1 (์ฃผ๊ธฐ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜์ง€ ์•Š์Œ)

3.6.0+

sessionTimeoutMillis

์„ธ์…˜๋งŒ๋ฃŒ ์‹œ๊ฐ„์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

1800000 (30๋ถ„)

3.11.0+

๋Œ€์‹œ๋ณด๋“œ ์„ค์ • ์ •๋ณด ๊ฐฑ์‹ 

๋Œ€์‹œ๋ณด๋“œ ์„ค์ • ์ •๋ณด๋ฅผ ๋ช…์‹œ์ ์œผ๋กœ ๊ฐฑ์‹  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

hackleClient.fetch();
๐Ÿšง

ํ•ด๋‹น ํ•จ์ˆ˜๋Š” 60์ดˆ์— ํ•œ๋ฒˆ ์ œํ•œ์ ์œผ๋กœ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


3. ์‚ฌ์šฉ์ž ์„ค์ •

์‚ฌ์šฉ์ž ์ •๋ณด๋ฅผ SDK์— ์„ค์ • ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ์šฉ์ž ID ์„ค์ •

์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธํ•œ ๊ฒฝ์šฐ, setUserId๋ฅผ ํ˜ธ์ถœํ•ด์„œ ๋กœ๊ทธ์ธํ•œ ์‚ฌ์šฉ์ž์˜ ID๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋กœ๊ทธ์ธ ์‹œ ํ•œ๋ฒˆ๋งŒ ์„ค์ •ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.
  • ์ด๋ฏธ ๋กœ๊ทธ์ธ์ด ๋˜์–ด์žˆ๋Š” ์‚ฌ์šฉ์ž์˜ ๊ฒฝ์šฐ์—๋Š” ๋กœ๊ทธ์ธํ•œ ์ •๋ณด๋ฅผ ํ™•์ธํ•˜๋Š” ์‹œ์ ์— ํ˜ธ์ถœํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.
const userId = ...; // ๋กœ๊ทธ์ธํ•œ ์‚ฌ์šฉ์ž์˜ ID (ํšŒ์›๋ฒˆํ˜ธ, ๋ฉค๋ฒ„ ID ๋“ฑ)
hackleClient.setUserId(userId);

์‚ฌ์šฉ์ž ์†์„ฑ ์„ค์ •

์ด๋ฉ”์ผ์ฃผ์†Œ, ์œ„์น˜, ๋‚˜์ด, ํšŒ์›๋“ฑ๊ธ‰๊ณผ ๊ฐ™์€ ์ •๋ณด๋ฅผ ์‚ฌ์šฉ์ž ์†์„ฑ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. setUserProperty, setUserProperties ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์‚ฌ์šฉ์ž ์†์„ฑ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import { PropertyOperationsBuilder } from "@hackler/react-native-sdk"

const operations = new PropertyOperationsBuilder()
    .set("age", 42)
    .set("grade", "GOLD")
    .build();

hackleClient.updateUserProperties(operations);

์‚ฌ์šฉ์ž ๋กœ๊ทธ์•„์›ƒ ์‹œ ์žฌ์„ค์ •

์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์•„์›ƒ ํ•œ ๊ฒฝ์šฐ resetUser๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๊ธฐ์กด์— ์„ค์ •ํ•œ ์‚ฌ์šฉ์ž ์ •๋ณด๋ฅผ ๋ฆฌ์…‹ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ์ •๋ณด๊ฐ€ ๋ฆฌ์…‹๋ฉ๋‹ˆ๋‹ค.

  • ์‚ฌ์šฉ์ž ID
  • ์‚ฌ์šฉ์ž ์†์„ฑ
hackleClient.resetUser();

4. ์ด๋ฒคํŠธ ์ „์†ก

์‚ฌ์šฉ์ž๊ฐ€ ์ˆ˜ํ–‰ํ•˜๋Š” ํ–‰๋™์„ ์ด๋ฒคํŠธ๋กœ ์ „์†กํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ „์†ก๋œ ์ด๋ฒคํŠธ๋Š” A/B ํ…Œ์ŠคํŠธ ๋ถ„์„, ๋ฐ์ดํ„ฐ ๋ถ„์„ ๋“ฑ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด, ์‚ฌ์šฉ์ž๊ฐ€ ๊ตฌ๋งค๋ผ๋Š” ํ–‰๋™์„ ํ–ˆ๋‹ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์ด๋ฒคํŠธ๋ฅผ ์ „์†กํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// ์ด๋ฒคํŠธ ์ „์†ก
const track = useTrack()
const event = { key: "purchase" }

<Button onClick={() => track(event)}>๊ตฌ๋งค</Button>

// ์ด๋ฒคํŠธ๋ฅผ ์†์„ฑ๊ณผ ํ•จ๊ป˜ ์ „์†ก
const track = useTrack()
const event = {
  key: "purchase",
  properties: {
    amount: 4200,
    pay_method: "CARD",
    is_discount: false
  }
}

<Button onClick={() => track(event)}>๊ตฌ๋งค</Button>

์ „์†กํ•œ ์ด๋ฒคํŠธ ํ™•์ธํ•˜๊ธฐ

๋Œ€์‹œ๋ณด๋“œ ์ด๋ฒคํŠธ๊ด€๋ฆฌ ๋ฉ”๋‰ด์—์„œ ์ „์†กํ•œ ์ด๋ฒคํŠธ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒคํŠธ ์ „์†ก ํ›„ ๋Œ€์‹œ๋ณด๋“œ์— ํ‘œ์‹œ๋˜๊ธฐ๊นŒ์ง€ ์ผ๋ฐ˜์ ์œผ๋กœ ~60์ดˆ๊ฐ€ ๊ฑธ๋ฆฝ๋‹ˆ๋‹ค.

5. A/B ํ…Œ์ŠคํŠธ

์‚ฌ์šฉ์ž๋ฅผ ํ…Œ์ŠคํŠธ ๊ทธ๋ฃน์œผ๋กœ ๋ถ„๋ฐฐํ•˜๊ณ  ๋ถ„๋ฐฐ๋œ ๊ฒฐ๊ณผ์— ํ•ด๋‹นํ•˜๋Š” ๋กœ์ง์„ ์ž‘์„ฑํ•˜์—ฌ A/B ํ…Œ์ŠคํŠธ๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. HackleExperiment ์ปดํฌ๋„ŒํŠธ ํ˜น์€ useVariation hook์— ์‹คํ—˜ํ‚ค๋ฅผ ์ „๋‹ฌํ•˜์—ฌ ํ˜ธ์ถœํ•˜๋ฉด ๋ถ„๋ฐฐ๊ฒฐ๊ณผ๋ฅผ ๋ฆฌํ„ด๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‹คํ—˜ํ‚ค: ๊ฐ A/B ํ…Œ์ŠคํŠธ๋ณ„๋กœ ๊ฐ–๊ฒŒ ๋˜๋Š” ๊ณ ์œ  ๋ฒˆํ˜ธ์ž…๋‹ˆ๋‹ค. A/B ํ…Œ์ŠคํŠธ๋ฅผ ์ƒ์„ฑํ•˜๋ฉด ์ž๋™์œผ๋กœ ๋ฐœ๊ธ‰๋ฉ๋‹ˆ๋‹ค.

function App() {
  return (
    // ์‹คํ—˜ ํ‚ค๊ฐ€ 42์ธ A/B ํ…Œ์ŠคํŠธ์—์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋…ธ์ถœํ•  ํ…Œ์ŠคํŠธ ๊ทธ๋ฃน์„ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
    // ๊ฒฐ์ •ํ•˜์ง€ ๋ชปํ•˜๋Š” ์ƒํ™ฉ์ธ ๊ฒฝ์šฐ ํ…Œ์ŠคํŠธ ๊ทธ๋ฃน A๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
    <HackleExperiment experimentKey={42}> 
      <HackleVariation variation={"A"}> // ํ• ๋‹น๋ฐ›์€ ๊ทธ๋ฃน์— ๋Œ€ํ•œ ๋กœ์ง
        <AwesomeFeature />
      </HackleVariation>
      <HackleVariation variation={"B"}>
        <SuperAwesomeFeature />
      </HackleVariation>
    </HackleExperiment>
  )
}
function App() {
  // ์‹คํ—˜ ํ‚ค๊ฐ€ 42์ธ A/B ํ…Œ์ŠคํŠธ์—์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋…ธ์ถœํ•  ํ…Œ์ŠคํŠธ ๊ทธ๋ฃน์„ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
  // ๊ฒฐ์ •ํ•˜์ง€ ๋ชปํ•˜๋Š” ์ƒํ™ฉ์ธ ๊ฒฝ์šฐ ํ…Œ์ŠคํŠธ ๊ทธ๋ฃน A๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
  const variation = useVariation(42)
  
  // ํ• ๋‹น๋ฐ›์€ ๊ทธ๋ฃน์— ๋Œ€ํ•œ ๋กœ์ง
  if (variation === "A") return <AwesomeFeature />
  if (variation === "B") return <SuperAwesomeFeature />
  return <AwesomeFeature />
}

๋ถ„๋ฐฐ ๊ฒฐ๊ณผ ํ™•์ธํ•˜๊ธฐ

๋Œ€์‹œ๋ณด๋“œ A/B ํ…Œ์ŠคํŠธ์˜ ์ƒ์„ธํŽ˜์ด์ง€์˜ ์‹ค์‹œ๊ฐ„ ๋…ธ์ถœ ํ˜„ํ™ฉ ํƒญ์—์„œ ๋ถ„๋ฐฐ๋œ ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ถ„๋ฐฐ ํ›„ ๋Œ€์‹œ๋ณด๋“œ์— ํ‘œ์‹œ๋˜๊ธฐ๊นŒ์ง€ ์ผ๋ฐ˜์ ์œผ๋กœ ~60์ดˆ๊ฐ€ ๊ฑธ๋ฆฝ๋‹ˆ๋‹ค.


6. ๊ธฐ๋Šฅ ํ”Œ๋ž˜๊ทธ

๊ธฐ๋Šฅ ํ”Œ๋ž˜๊ทธ๋Š” ์ผœ์ง(on) ์ƒํƒœ์™€ ๊บผ์ง(off) ์ƒํƒœ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒํƒœ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๋กœ์ง์„ ์ž‘์„ฑํ•˜์—ฌ ๊ธฐ๋Šฅ ํ”Œ๋ž˜๊ทธ๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. HackleFeature ์ปดํฌ๋„ŒํŠธ ํ˜น์€ useFeature hook ์— ๊ธฐ๋Šฅํ”Œ๋ž˜๊ทธํ‚ค๋ฅผ ์ „๋‹ฌํ•˜์—ฌ ํ˜ธ์ถœํ•˜๋ฉด on/off ์—ฌ๋ถ€๋ฅผ ๋ฆฌํ„ด๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ๋Šฅํ”Œ๋ž˜๊ทธํ‚ค: ๊ฐ ๊ธฐ๋Šฅํ”Œ๋ž˜๊ทธ๋ณ„๋กœ ๊ฐ–๊ฒŒ ๋˜๋Š” ๊ณ ์œ  ๋ฒˆํ˜ธ์ž…๋‹ˆ๋‹ค. ๊ธฐ๋Šฅํ”Œ๋ž˜๊ทธ๋ฅผ ์ƒ์„ฑํ•˜๋ฉด ์ž๋™์œผ๋กœ ๋ฐœ๊ธ‰๋ฉ๋‹ˆ๋‹ค.

function App() {
  return (
    // ๊ธฐ๋Šฅ ํ‚ค๊ฐ€ 42์ธ ๊ธฐ๋Šฅ ํ”Œ๋ž˜๊ทธ์—์„œ ์‚ฌ์šฉ์ž์˜ ์ƒํƒœ๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
    // ๊ฒฐ์ •ํ•˜์ง€ ๋ชปํ•˜๋Š” ์ƒํ™ฉ์ธ ๊ฒฝ์šฐ false(๊บผ์ง ์ƒํƒœ)๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
    <Feature featureKey={42}>
      {(featureOn) =>
        featureOn ? (
          <SuperAwesomeFeature /> // ์ผœ์ง ์ƒํƒœ์ผ ๋•Œ์˜ ๊ธฐ๋Šฅ
        ) : (
          <AwesomeFeature /> // ๊บผ์ง ์ƒํƒœ์ผ ๋•Œ์˜ ๊ธฐ๋Šฅ
        )
      }
    </Feature>
  )
}
function App() {
  // ๊ธฐ๋Šฅ ํ‚ค๊ฐ€ 42์ธ ๊ธฐ๋Šฅ ํ”Œ๋ž˜๊ทธ์—์„œ ์‚ฌ์šฉ์ž์˜ ์ƒํƒœ๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
  // ๊ฒฐ์ •ํ•˜์ง€ ๋ชปํ•˜๋Š” ์ƒํ™ฉ์ธ ๊ฒฝ์šฐ false(๊บผ์ง ์ƒํƒœ)๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
  const featureOn = useFeature(42)
  return (
    <>
    {
      featureOn ? (
        <SuperAwesomeFeature /> // ์ผœ์ง ์ƒํƒœ์ผ ๋•Œ์˜ ๊ธฐ๋Šฅ
      ) : (
        <AwesomeFeature /> // ๊บผ์ง ์ƒํƒœ์ผ ๋•Œ์˜ ๊ธฐ๋Šฅ
      )
    }
    </>
  )
}