[SSE/moAuth] 문자 인증 구현3 : AppState

AppState

• active : 앱이 foreground상태
• backgroud : 앱이 background에서 러닝 중(다른 앱 사용중, 홈 화면에 있음)
  - [Android] on another Activity(event if it was launched by your app)
  - [iOS] : inactive 👉iOS | app life cycle 공식 문서
  
  
  

이전 편에 이어서 내가 막혔던 블로커를 조금 자세하게 풀자면,
우리의 앱에서 문자인증을 위해 문자앱으로 이동할 경우, 우리의 앱은 background로 이동하게 되는데, 이때 안드로이드와 달리 iOS는 배터리 문제로 임시 비활성화를 시켜 inactive상태가 된다.
그래서 다시 앱으로 돌아왔을때에도 비활성화상태로, 정상적으로 진행되지 않고 계속 로딩에 머물러 있었던 것,,

열심히 구글링해보니, Native Module(심지어 우리는 Objective-C를 사용하고 있었다T-T)을 사용하는 방법이 있었는데, 아직 나는 RN도 익숙치 않았거니와 iOS 최신 버전만 지원하고 있어서 이 방법은 적합하지 않다고 판단했다.

그래서 다른 방안이 있는지 동기 개발자분과 같이 검토해보는데, RN에서 이 appState를 체크할 수 있는 방법이 있었다. 👉AppState-React Native 공식 문서

생각보다 매우 간단하게

import { AppState } from 'react-native';

const appState = AppState.currentState;

이런 식으로 import 시켜 사용할 수 있었다.

🔐 구현 코드

import { useState, useEffect } from 'react'
import { AppState } from 'react-native';

const [appState, setAppState] = useState(AppState.currentState);

useEffect(() => {
	AppState.eventListener('change', handleAppStateChange);
}, []);

const handleAppStateChange = nextAppState => {
	setAppState(nextAppState)
}

그래서 문자 인증 후 페이지로 재진입시 inactive된 앱의 상태를 다시 foreground로 업데이트 시켜주었다.
동기 개발자분과 함께 각자 기기로 테스트해봤는데, 드디어 안드로이드와 iOS 모두 정상 작동을 했다!! 😂
지금 보면 꽤 간단한 이슈였는데, 처음 겪어본 블로커라 디버깅, 구글링하는 과정에서 엄청 헤맸던 것 같다. 앞으로도 많은 이슈를 만나게 될텐데 지금처럼 당황하지 않고, 침착하게 이슈를 빠르고 정확하게 파악하는 훈련(?)을 해야겠다,,ㅎㅎ