React Native 앱 상태 관리 강화: `useAppVisibility` Hook 사용법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

- React Native 개발자 (중급 이상)

- 앱 상태 관리에 관심 있는 개발자

- TypeScript와 호환성 확보가 필요한 프로젝트 팀

핵심 요약

• useAppVisibility Hook은 타입 안전한 foreground/background 상태 추적을 제공합니다.
• onBackground/onForeground 콜백을 통해 상태 변경을 중앙 집중적으로 관리합니다.
• backgroundDuration, foregroundDuration을 통해 사용자 활동 시간 측정이 가능합니다.
• unknown, extension과 같은 엣지 상태를 자연스럽게 처리합니다.

섹션별 세부 요약

1. **Hook의 핵심 기능**

• 타입 정의 (UseAppVisibilityOptions, AppVisibilityState)로 컴파일 타임 안전성 확보.
• useState, useRef, useCallback을 활용한 상태 관리 및 이벤트 리스너 자동 정리.
• onAppStateChange를 통해 모든 상태 변경에 반응, onBackground/onForeground를 통해 특정 상태만 처리.

2. **사용 예시**

• 미디어 일시 정지 (Audio.pause()/Audio.resume())
• isBackground 상태로 변경 시 미디어 일시 정지, foreground로 복귀 시 재생.
• WebSocket 연결 관리
• onBackground 시 연결 종료, onForeground 시 재연결.
• JWT 자동 갱신
• 30분 이상 백그라운드일 경우 JWT 토큰 갱신 처리.

3. **성능 및 안정성 고려사항**

• 메모리 누수 방지
• useEffect의 cleanup 함수로 이벤트 리스너 제거.
• iOS/Android 대응
• iOS의 Cmd+Shift+H 키보드 조합으로 백그라운드 테스트, Android의 방향 전환 시 useSafeAreaInsets 활용.
• 테스트 권장사항
• Jest에서 AppState.addEventListener 모킹, Expo에서 expo-dev-client 사용.

결론

• useAppVisibility Hook을 통해 복잡한 상태 관리 로직을 간결하게 처리할 수 있습니다.
• 타입스크립트와 호환되며, 성능 최적화 및 메모리 누수 방지에 유리합니다.
• onBackground/onForeground 콜백을 활용한 중앙 집중식 이벤트 처리가 실무 적용에 강력 추천됩니다.