ReactNative에서 A/B Test 하기

Firebase Remote Config를 사용해서 A/B Test 세팅 정리

 

1. Remote Config 설치

https://rnfirebase.io/remote-config/usage

Remote Config | React Native Firebase

# Install & setup the app module
yarn add @react-native-firebase/app

# Install the remote-config module
yarn add @react-native-firebase/remote-config

# If you're developing your app using iOS, run this command
cd ios/ && pod install

 

 

2. 매개변수 준비

 

우선 매개변수를 가져오지 못한 경우를 위한 기본값을 설정해야 합니다.

import remoteConfig from '@react-native-firebase/remote-config';

remoteConfig().setDefaults({
    interstitialTime: 2, // 기본값
});

 

그리고 필요한 곳에서 값을 가져와 사용합니다.

async function fetchRemoteConfig() {
    await remoteConfig().fetchAndActivate();
    const time = remoteConfig().getValue('intersitialTime').asNumber();
    console.log('time:', time);
    return time;
}

 

 

3. 컴포넌트에서 A/B Test 적용

 

import React, { useEffect, useState } from 'react';
import { View, Button, Alert } from 'react-native';
import remoteConfig from '@react-native-firebase/remote-config';

export default function App() {
    const [time, setTime] = useState(2); // 기본값

    useEffect(() => {
        async function initializeRemoteConfig() {
            await remoteConfig().fetchAndActivate();
            const time = remoteConfig().getValue('interstitialTime').asNumber();
            setTime(time);
        }
        initializeRemoteConfig();
    }, []);

    const handleButtonPress = () => {
        console.log(`time = ${time}`);
    };

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Button title="press" onPress={handleButtonPress} />
        </View>
    );
}