React Native Modal Component 알아보기

React Native의 Modal 컴포넌트는 웹 인퍼페이스 중 하나인 모달(Modal)을 쉽고 빠르게 만들어 주는 내장 컴포넌트입니다. 아래에서는 프로퍼티 및 메소드를 알아보고 예제를 만들어보겠습니다.

# React Native Modal 알아보기

먼저 Modal을 어떻게 사용하고 어떤 프로퍼티와 메소드를 가졌는지 알아보겠습니다. 다음과 같은 모습을 하고 있습니다.

<Modal />

Modal의 기능은 프로퍼티를 적용하여 사용하며 프로퍼티들은 애니메니션을 포함한 다양한 기능의 프로퍼티를 가지고 있습니다. 자세하게 하나씩 알아보겠습니다.


visible [ Boolean ]
true, false로 설정하며 보이게 또는 안보이도록 설정하기 위해서 사용됨


transparent [ Boolean ]
불리언값으로 설정하며 true인 경우 <Modal />의 뒷 배경이 없는 transparent 상태를 가지게됨. 불투명 효과 적용시 배경값을 불투명하게 적용하여 사용함. 내부 콘텐츠의 크기를 작게할 경우 가려진 콘텐츠가 불투명하게 드러나게 됨.


animationType [ 'slide' | 'fade' | 'none' ]
Modal을 보이거나 사라질 때 간단한 애니메이션을 적용할 수 있음. 이때 설정 가능한 값은 다음과 같음

• slide 하단에서부터 이동하는 효과
• fade 서서히 나타나는 FadeInOut 효과
• none 애니메이션 효과 없이 적용됨

onRequestClose [ Function ]
모달을 닫는 경우 실행될 콜백 함수를 등록함.


onShow [Function]
위와는 반대로 모달이 보이게되면 실행될 콜백함수를 등록함.


여기까지 Modal에 사용되는 가장 중요하고 자주 사용되는 프로퍼티와 메소드의 정보를 알아보았습니다.

# Modal Component 예제보기

간단하게 예제를 만들어보겠습니다. 앱에서 모달을 보여주거나 숨길 수 있으며 transparent가 적용된 모달 소스입니다.
@ modal.js

작성중 ...