React Native 외부 SDK 생명주기: 요청·표시·닫힘을 어떻게 구분하는가

idle
  └─ 요청 → loading
               ├─ load 실패 → loadFailed
               └─ load 성공 → ready
                                  └─ show 요청 → showRequested
                                                       ├─ 표시 시작·예정 → presenting → dismissed
                                                       └─ 표시 실패 → showFailed

load 성공       화면을 표시할 객체가 준비됨
show/present 호출 외부 화면 표시를 요청함
표시 시작 사건   표시가 시작됐거나 곧 시작될 것임을 SDK가 알림
표시 실패 사건   화면이 나타나지 못한 종료 경로
닫힘 사건        표시된 화면이 사라진 종료 경로

import React, { useEffect, useRef, useState } from 'react'
import { Button, SafeAreaView, StyleSheet, Text, View } from 'react-native'
 
const USE_ATTEMPT_STATE_MACHINE = false
const SHOULD_FAST_LOAD_FAIL = false
const SHOULD_PRESENT_FAIL = false
 
type Phase =
  | 'idle'
  | 'loading'
  | 'ready'
  | 'loadFailed'
  | 'showRequested'
  | 'presenting'
  | 'showFailed'
  | 'dismissed'
 
type SdkSnapshot = {
  attemptId: string | null
  instanceId: string | null
  phase: Phase
}
 
type PresentationCallbacks = {
  onPresented: () => void
  onDismissed: () => void
  onFailedToPresent: () => void
}
 
type FullscreenHandle = {
  instanceId: string
  show: (callbacks: PresentationCallbacks) => void
}
 
type LoadCallbacks = {
  onLoaded: (handle: FullscreenHandle) => void
  onLoadFailed: () => void
}
 
const INITIAL_SNAPSHOT: SdkSnapshot = {
  attemptId: null,
  instanceId: null,
  phase: 'idle',
}
 
let fixtureGeneration = 0
 
function invalidateFixtureCallbacks() {
  fixtureGeneration += 1
}
 
function loadFakeFullscreen(
  instanceId: string,
  delayMs: number,
  shouldFail: boolean,
  callbacks: LoadCallbacks,
) {
  const generation = fixtureGeneration
 
  setTimeout(() => {
    if (generation !== fixtureGeneration) {
      return
    }
 
    if (shouldFail) {
      callbacks.onLoadFailed()
      return
    }
 
    callbacks.onLoaded({
      instanceId,
      show(presentationCallbacks) {
        setTimeout(() => {
          if (generation !== fixtureGeneration) {
            return
          }
 
          if (SHOULD_PRESENT_FAIL) {
            presentationCallbacks.onFailedToPresent()
            return
          }
 
          presentationCallbacks.onPresented()
 
          setTimeout(() => {
            if (generation === fixtureGeneration) {
              presentationCallbacks.onDismissed()
            }
          }, 2000)
        }, 300)
      },
    })
  }, delayMs)
}
 
export default function App() {
  const currentAttemptIdRef = useRef<string | null>(null)
  const loadedHandleRef = useRef<FullscreenHandle | null>(null)
  const [snapshot, setSnapshot] = useState(INITIAL_SNAPSHOT)
  const [sdkSurface, setSdkSurface] = useState('표시되지 않음')
  const [trace, setTrace] = useState<string[]>([])
 
  function appendTrace(message: string) {
    setTrace(current => [...current, message])
  }
 
  function resetFixture() {
    invalidateFixtureCallbacks()
    currentAttemptIdRef.current = null
    loadedHandleRef.current = null
    setSnapshot(INITIAL_SNAPSHOT)
    setSdkSurface('표시되지 않음')
    setTrace(['fixture 초기화'])
  }
 
  useEffect(() => {
    return invalidateFixtureCallbacks
  }, [])
 
  function beginAttempt(attemptId: string, delayMs: number, shouldFail: boolean) {
    currentAttemptIdRef.current = attemptId
    setSnapshot({ attemptId, instanceId: null, phase: 'loading' })
    appendTrace(`${attemptId} 요청`)
 
    loadFakeFullscreen(attemptId, delayMs, shouldFail, {
      onLoaded(handle) {
        if (
          USE_ATTEMPT_STATE_MACHINE &&
          currentAttemptIdRef.current !== attemptId
        ) {
          appendTrace(`${attemptId} 늦은 load 성공 무시`)
          return
        }
 
        loadedHandleRef.current = handle
        setSnapshot({
          attemptId: currentAttemptIdRef.current,
          instanceId: handle.instanceId,
          phase: 'ready',
        })
        appendTrace(`${attemptId} 객체 준비`)
      },
      onLoadFailed() {
        if (currentAttemptIdRef.current !== attemptId) {
          appendTrace(`${attemptId} 늦은 load 실패 무시`)
          return
        }
 
        loadedHandleRef.current = null
        setSnapshot({ attemptId, instanceId: null, phase: 'loadFailed' })
        appendTrace(`${attemptId} load 실패`)
      },
    })
  }
 
  function requestAThenB() {
    resetFixture()
    beginAttempt('attempt-A', 1200, false)
    const generation = fixtureGeneration
 
    setTimeout(() => {
      if (generation === fixtureGeneration) {
        beginAttempt('attempt-B', 200, SHOULD_FAST_LOAD_FAIL)
      }
    }, 50)
  }
 
  function showLoadedObject() {
    const attemptId = currentAttemptIdRef.current
    const handle = loadedHandleRef.current
 
    if (attemptId === null || handle === null) {
      appendTrace('표시할 객체 없음')
      return
    }
 
    if (USE_ATTEMPT_STATE_MACHINE) {
      setSnapshot({ attemptId, instanceId: handle.instanceId, phase: 'showRequested' })
    }
 
    handle.show({
      onPresented() {
        setSdkSurface(`${handle.instanceId} 표시 중`)
 
        if (
          USE_ATTEMPT_STATE_MACHINE &&
          currentAttemptIdRef.current === attemptId &&
          loadedHandleRef.current === handle
        ) {
          setSnapshot({ attemptId, instanceId: handle.instanceId, phase: 'presenting' })
        }
        appendTrace(`${handle.instanceId} 실제 표시`)
      },
      onDismissed() {
        setSdkSurface('표시되지 않음')
 
        if (
          USE_ATTEMPT_STATE_MACHINE &&
          currentAttemptIdRef.current === attemptId &&
          loadedHandleRef.current === handle
        ) {
          loadedHandleRef.current = null
          setSnapshot({ attemptId, instanceId: handle.instanceId, phase: 'dismissed' })
        }
        appendTrace(`${handle.instanceId} 실제 닫힘`)
      },
      onFailedToPresent() {
        setSdkSurface('표시되지 않음')
 
        if (
          USE_ATTEMPT_STATE_MACHINE &&
          currentAttemptIdRef.current === attemptId &&
          loadedHandleRef.current === handle
        ) {
          loadedHandleRef.current = null
          setSnapshot({ attemptId, instanceId: handle.instanceId, phase: 'showFailed' })
        }
        appendTrace(`${handle.instanceId} 실제 표시 실패`)
      },
    })
 
    if (!USE_ATTEMPT_STATE_MACHINE) {
      loadedHandleRef.current = null
      setSnapshot({ attemptId, instanceId: handle.instanceId, phase: 'dismissed' })
      appendTrace('show 반환을 닫힘으로 오판')
    }
  }
 
  const presentationIsPending =
    snapshot.phase === 'showRequested' || snapshot.phase === 'presenting'
  const lifecycleButtonsDisabled =
    USE_ATTEMPT_STATE_MACHINE && presentationIsPending
 
  return (
    <SafeAreaView style={styles.screen}>
      <Text style={styles.title}>외부 전면 SDK 생명주기 fixture</Text>
      <Text>
        mode: {USE_ATTEMPT_STATE_MACHINE ? 'attempt-state-machine' : 'latest-value'}
      </Text>
      <Text>현재 시도: {snapshot.attemptId ?? '없음'}</Text>
      <Text>화면 기록 객체 ID: {snapshot.instanceId ?? '없음'}</Text>
      <Text>앱 단계: {snapshot.phase}</Text>
      <Text>SDK 화면: {sdkSurface}</Text>
      <Text>기록: {trace.join(' / ') || '없음'}</Text>
      <View style={styles.actions}>
        <Button
          title="fixture 초기화"
          disabled={lifecycleButtonsDisabled}
          onPress={resetFixture}
        />
        <Button
          title="A 느리게 → B 빠르게 요청"
          disabled={lifecycleButtonsDisabled}
          onPress={requestAThenB}
        />
        <Button
          title="준비된 객체 표시"
          disabled={snapshot.phase !== 'ready'}
          onPress={showLoadedObject}
        />
      </View>
    </SafeAreaView>
  )
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, gap: 12 },
  title: { fontSize: 22, fontWeight: '700' },
  actions: { gap: 8 },
})

mode: latest-value
현재 시도: attempt-B
화면 기록 객체 ID: attempt-A
앱 단계: ready
기록: fixture 초기화 / attempt-A 요청 / attempt-B 요청 / attempt-B 객체 준비 / attempt-A 객체 준비

현재 시도: attempt-B
화면 기록 객체 ID: attempt-A
앱 단계: dismissed
SDK 화면: 표시되지 않음
기록 끝: show 반환을 닫힘으로 오판

const USE_ATTEMPT_STATE_MACHINE = true

mode: attempt-state-machine
현재 시도: attempt-B
화면 기록 객체 ID: attempt-B
앱 단계: ready
기록: fixture 초기화 / attempt-A 요청 / attempt-B 요청 / attempt-B 객체 준비 / attempt-A 늦은 load 성공 무시

직후
  앱 단계: showRequested
  SDK 화면: 표시되지 않음
 
약 300ms 뒤
  앱 단계: presenting
  SDK 화면: attempt-B 표시 중
 
다시 약 2초 뒤
  앱 단계: dismissed
  SDK 화면: 표시되지 않음

const SHOULD_PRESENT_FAIL = true

앱 단계: showFailed
SDK 화면: 표시되지 않음
기록 끝: attempt-B 실제 표시 실패

loading       아직 SDK 객체 없음
ready         현재 attemptId에 속한 객체 하나 보관
showRequested 같은 객체의 표시 결과를 기다림
presenting    같은 객체의 닫힘 또는 표시 실패를 기다림
dismissed     객체 비움, 다음 요청 가능
showFailed    객체 비움, 다음 행동 선택

시도 식별       요청 하나를 어떤 ID로 구분하는가
객체 소유       load된 SDK 객체를 누가 언제까지 보관하는가
load 종료       성공과 실패가 어느 사건으로 확정되는가
표시 요청       앱 active·화면 소유자·ready 조건을 어디서 확인하는가
표시 시작       show 반환과 플랫폼의 표시 시작·예정 사건을 구분하는가
종료 증거       닫힘과 표시 실패를 별도 상태로 남기는가
재요청 시점     표시 요청·표시 중에는 새 요청과 개발용 초기화를 막는가
늦은 사건       이전 요청·이전 화면의 callback을 어떻게 무시하는가
재사용          종료 객체를 비우고 새 요청으로 교체하는가
cleanup         화면 제거와 앱 background 조건을 각각 처리하는가
검증 환경       fixture·공식 테스트 광고·실기기 증거를 구분하는가

문제       빠른 B 뒤 늦은 A 객체가 B 자리를 덮고, show 반환을 닫힘으로 오판
관찰       앱은 attempt-B/dismissed인데 실제로 attempt-A 화면이 뒤늦게 표시
원인       요청 식별값, SDK 객체와 load·표시·종료 단계를 각각 연결하지 않음
행동       현재 attempt ID+객체가 같은 사건만 받아 상태 기계 전이
표시       showRequested → 플랫폼 표시 시작·예정 사건 → presenting
종료       dismissed와 showFailed에서 객체를 비우고 다음 요청 준비
경계       Android·iOS 원본 사건은 보존하고 공통 단계만 제품 상태로 번역
검증       JavaScript fixture 뒤 양 플랫폼 공식 테스트 광고와 기기 흐름 확인