[RN] React Native 앱 상태 관리 이해 및 구성 방법: AppState

해당 글은 React-native 내에서 AppState 라이브러리를 적용하는 사용법을 설명한 글입니다.

1) 문제점

---

💡 프로젝트를 진행하는 도중에 안드로이드 디바이스에서 홈 버튼을 눌렀다가 다시 앱으로 돌아오는 경우 아래와 같은 문제점이 발생하였습니다. ​해당 문제는 TensorCamera(expo-camera)를 사용하고 있는데, 앱을 벗어나는 경우에 'Unmount'를 수행하지 않고 나가고 다시 돌아온 경우에 발생하는 오류로 판단이 되었습니다.

parameter specified as non-null is null: method kotlin.o0.d.t.e, parameter settings

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2) 해결책

---

💡 이는 사용자가 앱을 벗어나는 경우에 TensorCamera를 숨겨주고, 다시 돌아오는 경우에 TensorCamera를 보여주는 상태로 처리하여서 해당 문제를 해결하였습니다.

 

 

3) AppState 적용하기

---

1. AppState란?

---

💡 현재 실행 중인 앱 상에서 작업 중인지 아니면 백그라운드(앱 밖에 있는 경우)인지에 대한 상태를 반환해 준다.

 

💡 AppState에서 반환해 주는 상태 
- active - 사용자가 앱의 포그라운드 내에서 실행 중인 경우를 의미합니다. (Android / IOS)
 - background - 앱이 백그라운드에서 실행 중인 경우를 의미합니다. (Android)
- 사용자가 다른 앱에서 사용 중인 경우  
- 사용자가 홈 화면에서 위치해 있는 경우
- inactive - 포그라운드/백그라운드 전환 시, 멀티태스킹 화면 진입 등 비활성 상태이거나 전화 수신 시 발생하는 상태입니다. (IOS)

[ 더 알아가기 ]
foreground : 사용자가 앱 안에 있는 상태를 의미합니다. background: 사용자가 앱 밖에 있는 상태를 의미합니다

 

[참고] 공식사이트 

AppState - Expo Documentation

 

2. 적용 코드

---

AppState에서 사용되는 코드를 지정된 공통 코드로 적용하여 만들어두었습니다

/**
 * [정의] 사용자가 앱에서 어떤 상태 인지에 대한 코드 관리
 */
export const enum USER_APP_STATE {
    active = "active",          // 앱 안에서 사용중인 경우 
    inactive = "inactive",      // [IOS] 앱 안에서 벗어난 경우 
    background = "background",  // 앱 안에서 다른곳으로 벗어난 경우 
}

 

1. react-native의 AppState를 import 합니다.
2. AppState의 값을 받아옵니다.
3. useEffect()를 통해서 해당 화면에서 각각 감지를 하여 변경된 상태를 확인합니다.
4. 최종적으로 반환받은 값에 따라서 TensorCamera를 보여주고 안보여주고 처리를 합니다.

import { USER_APP_STATE } from "common/CommonCode";
import { useEffect, useRef, useState } from "react";
import { AppState } from "react-native";

const AppStateComponent = () => {
    // 현재의 상태를 알려주는것 
    const appState = useRef(AppState.currentState);

    // 현재 사용자의 앱을 활성화 / 비활성화 여부 
    const [appStateVisible, setAppStateVisible] = useState(appState.current);

    useEffect(() => {

        // 사용자가 앱의 상태가 변경 되었을 경우 실행이 된다.
        AppState.addEventListener('change', fn_handleAppStateChange);

        return () => {
            // 사용자가 앱의 상태가 변경 되었을 경우 실행이 된다.
            AppState.removeEventListener('change', fn_handleAppStateChange);
        };
    }, []);

    /**
     * [함수] 사용자가 앱의 상태가 변경 되었을 경우 실행이 된다.
     * 사용자가 현재 어떤 상태인지 (foreground / background)에 대한 반환을 해준다.
     * @param {string} nextAppState App에서 변경된 상태 값이 전달받음 (active, inactive, background)
     */
    const fn_handleAppStateChange = (nextAppState: any) => {

        console.log("appState.current ::: ", appState.current);

        if ((appState.current === USER_APP_STATE.inactive || appState.current === USER_APP_STATE.background)
            && nextAppState === USER_APP_STATE.active) {
            console.log("앱으로 다시 돌아오는 경우 foreground");
        }
        appState.current = nextAppState;    // 변경된 상태를 바꿔줌.
        setAppStateVisible(appState.current);
    };

    return (
        <View>
            {/* 1. 텐서 카메라가 준비 되어야함 2. isFocused가 true여야 한다 3. AppState가 active 상태여야 한다 */}
            {
                appStateVisible === USER_APP_STATE.active ?
                    <TensorCamera /> :
                    <></>
            }
        </View>
    )
}
export default AppStateComponent;

 

 

💡 [참고] AppState.removeEventListener() 기능이 존재하지 않는 경우 아래와 같이 사용합니다.

useEffect(() => {

    // 사용자가 앱의 상태가 변경 되었을 경우 실행이 된다.
    const myListener = AppState.addEventListener('change', handleAppStateChange);

    return () => {
        myListener.remove();
    };


}, []);