React Native - 모달

모달창을 만들어보자.

1. Modal import

react-native로부터 Modal을 import한다.

화면

2. Modal 컴포넌트 사용

react-native로부터 import한 Modal 컴포넌트를 사용해보자.

화면

똑같다. 모달이 화면을 꽉 채워서 똑같아 보이는 것이다.

모달 만들기에 성공했다! 끝!

.
.
.

이 모달(모달이라고도 할 수 없다)은 아무 쓸모가 없다. 오늘 할 일은 모달을 쓸모있게 만들어 보는 것.

리액트네이티브 공식문서(https://reactnative.dev/docs/modal)의 예제코드롤 가져와서 모달의 다양한 기능들을 사용해보자.

3. Modal 프로퍼티 설정

모달의 세부사항은 모달의 프로퍼티를 통해 설정할 수 있다.

모달의 모든 프로퍼티는 다음과 같다.

이 중 프로퍼티명 뒤에 원 모양 표시가 붙은 프로퍼티들은 특정 OS에서만 작동한다.
초록색 원은 안드로이드, 검정색 원은 IOS를 나타낸다.

항상 모든 프로퍼티를 사용하진 않으니 예제에서 사용된 프로퍼티만 간략하게 살펴보자.

다음은 예제 중 모달 컴포넌트의 코드이다.

<Modal
  animationType="slide"
  transparent={true}
  visible={modalVisible}
  onRequestClose={() => {
    Alert.alert('Modal has been closed.');
    setModalVisible(!modalVisible);
  }}>
  <View style={styles.centeredView}>
    <View style={styles.modalView}>
      <Text style={styles.modalText}>Hello World!</Text>
      <Pressable
        style={[styles.button, styles.buttonClose]}
        onPress={() => setModalVisible(!modalVisible)}>
        <Text style={styles.textStyle}>Hide Modal</Text>
      </Pressable>
    </View>
  </View>
</Modal>

모달에 사용된 프로퍼티는 4가지이다.

• animationType="slide" : 모달이 나타날 때, 사라질 때 slide 형식의 animation으로 표현된다.
• transparent={true} : 투명하여 모달이 나타났을 때도 기존의 바탕 컴포넌트들이 보인다.
• visible={modalVisible} : modalVisible 변수를 통해 모달의 보임 여부가 결정된다.
• onRequestClose={() => {}} : back button(뒤로가기 버튼) 입력 시의 동작

사실 프로퍼티는 공식 문서를 통해 학습하면 된다.

이번 글에서는 간단하게 모달의 구조와 사용법을 다룰 것이다.

4. Modal 구조

위 예제 모달의 구조를 살펴보면 style 프로퍼티로 styles.centeredView를 가진 View 컴포넌트 내에 styles.modalView를 가진 View가 있다.

즉, 다음과 같은 구조를 갖는다.
모달 컴포넌트 > 바탕 뷰 > 모달 컨텐츠 뷰

일반적으로 이러한 구조의 모달을 사용하면 된다.

모달의 내용을 담을 컴포넌트를 배경이 될 컴포넌트로 한 번 감싸주는 것이다.

이렇게 작성하는 이유는 크게 두 가지라고 생각한다.

• 디자인 : 모달 내용과 배경에 다른 디자인을 적용하는 경우(대표적인 예로 모달 출력 시 배경을 어둡게)
• 기능 : 배경 클릭 시 특정 이벤트(대표적인 예로 모달 닫기) 적용할 경우

끝!

다음 글에선 모달에서 발생하는 이벤트 버블링을 처리하는 방법에 대해서 다룰 것이다!