🧊 40. React Native 모달 완전 정리 — 기본 Modal부터 BottomSheet, Portal까지

---

모바일 앱에서 모달은 정말 자주 쓰인다.

• 안내창(Alert)
• 사용자 동의, 확인
• 옵션 선택
• 하단 시트 (BottomSheet)

React Native에서도 기본 <Modal />이 있지만,
실제로 앱을 만들다 보면 하단에서 올라오는 시트, 중첩된 모달, 다크 배경 처리 등
기본 기능만으로는 부족한 상황이 자주 생긴다.

이번 글은 React Native에서 사용할 수 있는
모달 처리 방법 3가지를 정리했다.

---

✅ 1. 기본 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>

특징

• visible로 열고 닫음
• transparent 설정 시 배경 어둡게 가능
• iOS에서 스와이프로 닫기 지원 (onRequestClose)

✅ 간단한 알림, 확인창에 유용
❌ 중첩 모달, 커스텀 UI 제약 많음

---

💡 스타일 팁

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  modalBox: {
    backgroundColor: 'white',
    padding: 24,
    borderRadius: 10,
    width: '80%',
  },
});

---

📥 2. BottomSheet 방식 (react-native-modalize 등)

npm install react-native-modalize

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

const modalRef = useRef<Modalize>(null);

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

• 하단에서 올라오는 시트 구조
• 터치 제스처, snapPoint 설정 등 풍부한 커스터마이징
• UI/UX적으로 훨씬 자연스러움

✅ 카카오톡, 인스타, 유튜브 등 주요 앱이 사용
✅ 모달처럼 UX를 차단하지 않고도 레이어 제공 가능
❌ 설치 필요, 컨트롤 로직 추가됨

---

🌀 3. Portal 방식 (react-native-paper 등)

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

<Portal>
  <Modal visible={visible} onDismiss={() => setVisible(false)}>
    <Text>다른 컴포넌트 위에 떠있는 모달</Text>
  </Modal>
</Portal>

• 화면 어디에 있든, 최상위 레이어로 모달을 띄움
• 중첩 구조에서도 모달 위치 충돌을 방지할 수 있음

✅ 여러 컴포넌트에서 모달 컨트롤 시 유용
✅ 다크 오버레이, 딤 처리 자연스럽게 가능
❌ paper 스타일에 종속됨

---

⚖️ 비교 요약

방식	특징	추천 사용처
기본 <Modal>	RN 기본 제공, 단순 팝업	알림, 확인, 간단한 입력
BottomSheet	UX에 최적, 커스터마이징 강력	옵션 선택, 액션 시트
Portal	위치 무관하게 띄움	중첩 모달, 글로벌 처리

---

🧠 실전 팁

• 닫을 때는 onRequestClose 또는 setVisible(false)로 상태 변경
• KeyboardAvoidingView와 함께 사용 시 입력창 가림 방지
• backdrop 터치 시 닫히는 기능: TouchableWithoutFeedback 처리 or 라이브러리 옵션 사용
• 여러 모달 겹치지 않도록 모달 상태 관리 잘 분리할 것

---

📝 내가 느낀 점

처음에는 RN의 <Modal />만 써도 충분하다고 생각했는데,
실제로 앱을 만들다 보면 모달이 겹치고,
하단 시트가 필요하고, 글로벌하게 호출돼야 하고…
그때마다 새로운 도구나 패턴이 필요하다는 걸 깨달았다.

지금은 아래 구조로 관리하고 있어:

• 단순 안내창 → Modal
• 선택/설정 등 → Modalize
• 전역 알림 → Portal + 상태관리

---

🧊 "모달은 단순한 UI가 아니다. 앱의 흐름을 끊지 않는 UX 전략이다."

---