🪟 57. React Native 모달 관리 전략 — 전역 상태, BottomSheet, 중첩 처리까지

---

모바일 앱에서 모달은

• 알림
• 선택지 제시
• 사용자 입력
• 바텀시트 메뉴
  등 다양한 상황에서 사용된다.

하지만, 잘못 설계하면
모달이 겹치거나, 닫히지 않거나, UI가 깨지는 문제가 발생한다.

이번 글은 React Native에서 모달을 안정적이고 유연하게 설계하는 전략을 정리한 글이다.

---

✅ 기본 Modal 컴포넌트 사용

import { Modal, View, Text, Button } from 'react-native';

<Modal
  visible={isVisible}
  transparent={true}
  animationType="slide"
  onRequestClose={() => setIsVisible(false)}
>
  <View style={styles.overlay}>
    <View style={styles.modalBox}>
      <Text>안내 메시지</Text>
      <Button title="닫기" onPress={() => setIsVisible(false)} />
    </View>
  </View>
</Modal>

✅ 빠르게 띄울 수 있음
✅ 알림/확인창에 적합
❌ 중첩 처리, 전역 처리 어려움

---

📦 전역 모달 관리 구조 (Zustand 기반)

const useModalStore = create((set) => ({
  isOpen: false,
  modalContent: null,
  openModal: (content) => set({ isOpen: true, modalContent: content }),
  closeModal: () => set({ isOpen: false, modalContent: null }),
}));

<Modal visible={isOpen}>
  {modalContent}
</Modal>

✅ 어느 화면에서나 openModal(<MyModal />) 호출 가능
✅ 상태를 한 곳에서 통합 관리
✅ 중첩, 중복 방지

---

🧲 BottomSheet (Modalize / Reanimated BottomSheet)

npm install react-native-modalize

import { Modalize } from 'react-native-modalize';

<Modalize ref={modalRef} snapPoint={300}>
  <Text>옵션 목록</Text>
</Modalize>

✅ 바텀시트 방식으로 사용자 친화적 UX
✅ swipe, scroll 연동
✅ 모달보다 자연스러운 UI 제공

---

🌀 Portal 방식 (react-native-paper)

import { Portal, Modal } from 'react-native-paper';

<Portal>
  <Modal visible={visible}>
    <Text>최상위 모달</Text>
  </Modal>
</Portal>

✅ 최상단에서 렌더링 → 겹침 문제 방지
✅ 여러 화면 겹침에도 안정적으로 작동

---

🧠 실전 설계 팁

상황	추천 전략
단순 알림	RN Modal + 상태
선택형 바텀시트	Modalize, BottomSheet
앱 전역 알림창	Zustand + 전역 Modal 컴포넌트
중첩된 화면에서 사용	Portal or absolute 위치 조절
디자인 커스터마이징	Modal 컴포넌트 분리 + props 전달 구조

---

📝 내가 느낀 점

모달은 단순히 visible 상태 하나로 관리되는 게 아니라
전역/중첩/UI/동작 모두 고려한 구조가 있어야
앱이 무너지지 않고 사용자 경험도 자연스럽게 이어질 수 있다는 걸 느꼈다.

지금은 Zustand + ModalWrapper + Modalize 조합으로
알림, 선택창, 바텀시트, 사용자 입력 모달을 유연하게 관리하고 있다.

---

🪟 “모달은 화면 위의 화면이 아니라, 흐름 위의 인터페이스다.”

---