[React-native] RN Modal창 사용해보기

이번엔 사용자에게 정보를 전달하고 상호작용 할 수 있는 Modal 창을 구현해볼 생각이다.

Modal · React Native

공식 문서를 참고하여 제작을 진행할 예정이다.

1. 세팅하기

react native 자체 hook이기 때문에 별도의 설치가 필요하지 않다.

import 하여 사용하면 된다.

import { Modal } from "react-native";

이제 모달 태그를 사용할 수 있게 되었다.

2. Modal 태그의 Props 살펴보기

Modal의 50%는 Props에서 이루어지는 거 같다…

제작하면서 사용해본 몇 개의 Props를 정리해봤다

<Modal
      animationType="slide" //모달이 나타나는 방식
      visible={visible} //모달이 보이는 여부
      transparent={true} // 모달 배경 투명 여부
      onRequestClose={onRequestClose} // 뒤로가기를 눌렀을 때
    >

1) animationType

: 모달의 애니메이션 방식을 제어하는 props

• silde / fade / none 세 가지 옵션 존재

2) visible

: 모달이 보이는 여부를 제어

• 보통은 useState로 visible변수를 선언하여 사용

3) transparent

: 모달의 배경 보이는 여부

• 해당 option을 true로 하게 되면 모달이 있는 component의 배경이 보이게 된다.

4) onRequestClose

: 뒤로가기를 눌렀을 때 제어할 수 있는 props

• Modal이 열려있는 동안엔 다른 작업을 진행할 수 없기 때문에 중요한 props이다.
• 앞서 선언한 변수를 통해 해당 옵션에서 모달이 사라지는 로직을 넣었다.

5) onDismiss 

: 모달이 닫혔을 때 호출되는 함수 선언 가능

주로 위의 props를 사용해 구현하였다.

실제 모달창이 열리는 것 처럼 구현하기 위해, 모달창 내부에 오버레이 역할을 하는 뷰를 생성했다.

<View
        style={styles.modalBgc}
        onTouchEnd={onRequestClose} // 모달창의 배경을 눌렀을 때
      >
        ...
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  modalBgc: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0, 0, 0, 0.5)", // 뒷 배경 흐리게
    paddingHorizontal: 24,
    alignItems: "center",
    justifyContent: "center",
  },

또한, 실제 모달이 될 창 이외의 배경(현재 오버레이 뷰)을 클릭했을 때 자연스레 모달창이 닫히도록 onTouchEnd props를 설정해준다.

이렇게 상위 뷰에 모달이 닫히는 모션을 추가하게 되면 한 가지 문제가 발생한다.

해당 옵션이 하위 태그에도 영향을 주기 때문인데,

이를 방지하기 위해 하위 태그에 다음과 같은 메서드를 추가한다.

<View
          style={styles.modalContainer}
          onTouchEnd={(e) => e.stopPropagation()}
        >

stopPropagation()

이렇게 되면 이후 작성하는 하위 태그들에는 이벤트가 전달되지 않는다.

참고한 블로그

이젠 자유롭게 모달을 작성하면 된다.

본인은 모달 내부에 Material top tab을 삽입하여 보여줄 예정이다.

이 과정은 다음 포스트에…