React Native의 Provider 종류

React Native의 Root Wrapper 구조를 살펴보자. 웹으로 치면 App.js에서 Redux Provider, ThemeProvider, BrowserRouter 등을 중첩해서 감싸는 것과 동일한 논리이다. 또한 모바일 특유의 물리적 제약(제스처, 키보드, 네이티브 성능)을 해결하기 위한 라이브러리들도 같이 알아보자.

1. SafeAreaProvider

요즘 나오는 스마트폰들은 노치(Notch), 펀치홀 카메라, 하단의 홈 인디케이터(바) 때문에 화면 전체를 네모 반듯하게 쓸 수가 없다.

이 "위험한 영역"을 피해서 안전한 곳에만 콘텐츠를 보여주게 해주는 핵심 라이브러리가 바로 react-native-safe-area-context다. (React Native 내장 SafeAreaView는 기능이 부족해서 실무에선 무조건 이 라이브러리를 쓴다.)

• Safe Area란 노치나 홈 바, 상태 바에 가려지지 않는 순수한 화면 영역을 뜻한다.

• <SafeAreaProvider /> : 앱이 시작될 때 "이 폰의 안전 영역이 어디부터 어디까지인지" 계산하고 정보를 뿌려주는 공급자다.

• <SafeAreaView /> : Provider가 계산한 정보를 바탕으로, 실제로 패딩(padding)을 줘서 콘텐츠가 잘리지 않게 보호해 주는 컴포넌트(View)다.

• 기기마다 다른 노치 높이를 알아서 계산해서 paddingTop, paddingBottom 등을 적용해 준다.

• 유연성: edges 속성을 써서 위, 아래, 왼쪽, 오른쪽 중 어디를 보호할지 정할 수 있다. (예: "위쪽 노치는 피하고, 아래쪽 홈 바는 무시해라" 가능)

2. GestureHandlerRootView

react-native-gesture-handler 라이브러리에서 제공하며 네이티브 제스처 시스템의 뿌리이다.

• 웹 대응 : 없음 (웹은 브라우저가 클릭/스크롤을 처리함).
• RN의 기본 터치 시스템인 Touchable, Pressable은 JS 스레드에서 제스처를 처리한다. 복잡한 제스처(드래그, 스와이프, 핀치 줌)를 다루기엔 성능이 부족하고 끊길 수 있다.
• 이 컴포넌트는 iOS/Android의 진짜 네이티브 터치 시스템을 JS와 연결해 주는 역할을 한다.
• 이걸 감싸지 않으면 스크롤이 이상하거나, 버튼이 안 눌리거나, 네비게이션의 '스와이프 뒤로 가기'가 동작하지 않는 치명적인 버그가 발생한다.
• 반드시 최외곽 루트에 위치해야 하며, style={{ flex: 1 }}을 함께 주지 않으면 화면이 렌더링되지 않으니 주의한다.

3. KeyboardProvider

react-native-keyboard-controller 라이브러리에서 제공하며 키보드 애니메이션 동기화를 해준다.

• 웹 대응 : 없음 (웹은 키보드가 올라와도 뷰포트가 자동으로 어느 정도 조절됨).
• Native 앱에서의 키보드는 앱 위에 덮이는 별도의 OS 창이다. 그래서 키보드가 올라오면 입력창을 가려버린다.
• 이 Provider는 키보드가 올라오는 속도와 높이를 실시간으로 추적한다. 키보드가 1px 올라갈때도 UI도 1px 올라가게 해서, 마치 키보드와 UI 가 붙어있는 것처럼 부드러운 애니메이션을 가능하게 한다. 채팅앱을 만들땐 필수이다.

4. TamaguiProvider (tamagui)

여러 스타일링 솔루션 중 하나의 선택지다.
tamagui 라이브러리에서 제공하며 UI 스타일링 엔진 및 테마 주입의 역할을 한다. 앱 전체에 색상, 폰트, 스페이싱, 미디어 쿼리 설정을 내려준다.

• 웹 대응 : Tailwind CSS + MUI + Stitches.
• RN용 스타일 엔진이자 컴포넌트 라이브러리이다. 런타임 성능을 위해 스타일을 미리 컴파일한다.
• 위험 : tamaguiConfig가 잘못되면 앱 전체 테마와 레이아웃 시스템이 깨진다.

4.1 PortalProvider

tamagui 라이브러리에서 제공하는 계층 구조 탈출 (모달, 토스트 등) 라이브러리이다.

• 웹 대응 : z-index 나 position fixed, 다른 ui 라이브러리, createPortal 등으로 모달을 띄우기 쉽다.
• 안드로이드와 ios는 뷰 계층 구조가 엄격하다. 부모 뷰 안에 자식이 갇히는 구조라서, 깊숙한 컴포넌트에서 z-index를 아무리 줘도 부모를 뚫고 화면 최상단으로 나오기 어렵다.
• PortalProvider는 논리적으로는 깊은 곳에 있는 컴포넌트(예: 버튼 눌렀을 때 뜨는 팝업)를 물리적으로는 앱의 최상위 루트로 옮겨서 렌더링해 준다.
• 모달(Modal), 툴팁(Tooltip), 토스트 메시지(Toast)가 다른 UI에 가려지지 않게 해주는 필수 요소이다.

5. Root Provider 감싸는 순서

Provider 간의 의존 관계가 있기 때문에 순서가 중요하다. 아래 순서를 권장한다.

<GestureHandlerRootView style={{ flex: 1 }}>  {/* 반드시 최외곽 */}
  <SafeAreaProvider>
    <KeyboardProvider>
      <TamaguiProvider config={tamaguiConfig}>
        <PortalProvider>
          <App />
        </PortalProvider>
      </TamaguiProvider>
    </KeyboardProvider>
  </SafeAreaProvider>
</GestureHandlerRootView>