React 컴포넌트와 앱 생명주기: 화면이 남은 채 앱이 뒤로 갈 수 있는가

컴포넌트 제거  → 해당 Effect의 마지막 cleanup 실행
앱 background → 컴포넌트가 남은 채 AppState만 바뀔 수 있음
프로세스 종료  → 현재 JavaScript 실행 자체가 사라지는 별도 경계

// camera-session-fixture.ts
let running = false
let startCallCount = 0
let stopCallCount = 0
let startCount = 0
let stopCount = 0
 
function printSnapshot(label: string) {
  console.info(label, {
    running,
    startCallCount,
    stopCallCount,
    startCount,
    stopCount,
  })
}
 
export const cameraSession = {
  start() {
    startCallCount += 1
    if (running) {
      printSnapshot('camera.start ignored')
      return
    }
    running = true
    startCount += 1
    printSnapshot('camera.start')
  },
  stop() {
    stopCallCount += 1
    if (!running) {
      printSnapshot('camera.stop ignored')
      return
    }
    running = false
    stopCount += 1
    printSnapshot('camera.stop')
  },
  snapshot(label: string) {
    printSnapshot(label)
    return {
      running,
      startCallCount,
      stopCallCount,
      startCount,
      stopCount,
    }
  },
}

import { useEffect, useState } from 'react'
import { Pressable, Text, View } from 'react-native'
import { cameraSession } from './camera-session-fixture'
 
function Scanner() {
  const [status, setStatus] = useState('멈춤')
 
  useEffect(() => {
    cameraSession.start()
    setStatus('실행 중')
 
    return () => {
      cameraSession.stop()
    }
  }, [])
 
  return <Text>카메라 세션: {status}</Text>
}
 
export default function App() {
  const [showScanner, setShowScanner] = useState(true)
 
  return (
    <View style={{ padding: 24 }}>
      <Pressable onPress={() => setShowScanner(value => !value)}>
        <Text>{showScanner ? '스캔 화면 제거' : '스캔 화면 복원'}</Text>
      </Pressable>
      <Pressable onPress={() => cameraSession.snapshot('수동 기준값')}>
        <Text>fixture 기준값 기록</Text>
      </Pressable>
      {showScanner ? <Scanner /> : null}
    </View>
  )
}

앱의 첫 Effect 점검           기준값을 잡기 전이므로 절대 횟수는 무시
스캔 화면 제거               stopCallCount +1, stopCount +1
스캔 화면 복원               startCallCount +1, startCount +1
Home 직전                    running=true 기준값 기록
기기 Home                    AppState active → background
React Scanner unmount         없음
camera.stop 추가 호출         없음, stopCallCount +0, stopCount +0
앱 다시 열기                 AppState background → active
복귀 snapshot                running=true, Home 전후 stopCallCount +0

import { useEffect, useState } from 'react'
import {
  AppState,
  type AppStateStatus,
  Pressable,
  Text,
  View,
} from 'react-native'
import { cameraSession } from './camera-session-fixture'
 
function Scanner() {
  const [status, setStatus] = useState('멈춤')
 
  useEffect(() => {
    let running = false
 
    function syncSession(nextState: AppStateStatus) {
      if (nextState === 'active' && !running) {
        cameraSession.start()
        running = true
        setStatus('실행 중')
        return
      }
 
      if (nextState !== 'active' && running) {
        cameraSession.stop()
        running = false
        setStatus('일시 중지')
      }
    }
 
    const subscription = AppState.addEventListener('change', syncSession)
 
    try {
      syncSession(AppState.currentState)
    } catch (error) {
      subscription.remove()
      throw error
    }
 
    return () => {
      subscription.remove()
      if (running) cameraSession.stop()
    }
  }, [])
 
  return <Text>카메라 세션: {status}</Text>
}
 
export default function App() {
  const [showScanner, setShowScanner] = useState(true)
 
  return (
    <View style={{ padding: 24 }}>
      <Pressable onPress={() => setShowScanner(value => !value)}>
        <Text>{showScanner ? '스캔 화면 제거' : '스캔 화면 복원'}</Text>
      </Pressable>
      <Pressable onPress={() => cameraSession.snapshot('수동 기준값')}>
        <Text>fixture 기준값 기록</Text>
      </Pressable>
      {showScanner ? <Scanner /> : null}
    </View>
  )
}

앱의 첫 Effect 점검           기준값을 잡기 전이므로 절대 횟수는 무시
안정된 Scanner               AppState active, running=true 기준값 기록
기기 Home                    AppState background, stopCallCount +1, stopCount +1, running=false
React Scanner unmount         없음
앱 다시 열기                 AppState active, startCallCount +1, startCount +1, running=true
스캔 화면 제거               subscription.remove, stopCallCount +1, stopCount +1, running=false
제거 뒤 AppState 전환         startCallCount +0, stopCallCount +0

문제       Home 이동 뒤에도 카메라 stop 기록이 없고 복귀 화면은 실행 중으로 남음
잘못된 판단 background가 되면 React가 모든 컴포넌트를 unmount하고 cleanup을 실행함
관찰       AppState만 active→background로 바뀌고 Scanner unmount는 없음
원인       카메라 세션 조건을 컴포넌트 존재 하나로만 정함
행동       AppState change를 구독해 active에서 시작하고 나머지 상태에서 중지
검증       background 중 중지, active 복귀 한 번 시작, unmount 뒤 구독·세션 해제