[ React Native ] app.tsx app.js 기본 구조

react native 로 aa를 할때, 모든 개발이 그렇듯, 공통 모듈을 분리해놓는 것이 좋다.

 

rn은 크로스플랫폼 개발이라서, ios 노치 디자인 등 신경써야 할 것들이 많다.

 

대부분의 개발자분들이 그렇듯, app.tsx app.js에 앱 전반에 영향을 미치는 부분들을 생각해서 기본구조를 짤것이다.

 

예시를 들어보면

 

<BackgroundTask>

<ReRenderProvider>

<ThemeProvider>

<LanguageProvider>

<Provider store={store}>

<PersistGate loading={null} persistor={persistor}>

<NavigationContainer ref={navigationRef}>

<Stack.Navigator

등으로 app.tx app.js를 구성하는 경우가 있었다.

 

앱의 foreground / background 상태를 체크하기 위한 BackgroundTask

강제 랜더링을 위한 ReRenderProvider

앱의 테마를 위한 ThemeProvider

언어 다국어 처리를 위한 LanguageProvider

local 저장소인 store를 위한 Provider및 PersistGate

그 안에 네비게이션 컨테이너를 넣어준다.

 

기획과 스토리 보드에 따라

SafeAreaProvider

나

ErrorBoundary

도 적용하는 것이 좋다.

 

앱에서 주로쓰는 firebase noti 들과, 코드푸쉬는 주로 index.js에서 사용했다.