이번 주제는 모바일 앱을 만드는 과정에서 자주 사용해볼 modal을 만드는 두 가지 방법에 대해서 다뤄보려고 한다.
모바일 앱을 만들다보면, 화면 전환 없이 새로운 레이아웃에서 정보를 보여주고 싶을 때가 있을 것이다. 이 경우 보통 modal을 고려하게 되는데, 나 역시도 굉장히 다양한 파트에서 사용하고 있다.
예를 들면, 댓글 신고/차단과 같은 추가적인 단계가 필요할 시 모달을 이용하기도 하고, 어떤 정보를 보여줄 때 필터링을 걸어야 할 때가 있다면, 그 필터 보기를 모달로 보여주기도 한다.
나는 모달을 이용할 때, 두 가지 라이브러리에서의 모달을 이용해봤다.
react-native
우선적으로, 먼저 다뤄볼 건 react-native에서 기본 제공하는 Modal이다.
기본 Text, View 처럼 Modal도 기본으로 제공하며, 이를 custom 하여 사용할 수 있다.
import Modal from 'react-native';
<Modal
animationType="fade"
transparent={true}
visible={recommentHandler.isModalVisible}
onRequestClose={() => {
recommentHandler.setIsKeyboardVisible(true);
recommentHandler.setIsModalVisible(false);
}}
style={[
{justifyContent: 'flex-end', margin: 0},
Platform.OS === 'ios' && {paddingBottom: insets.bottom},
]}>위는 Modal을 사용하는 예시이다. 기본적으로 animation Type을 fade, slide 등으로 지정 가능하며, visible 변수를 이용하여 모달이 나타나는 타이밍을 조절할 수 있다. onRequestClose는 modal이 닫힐 시 호출되는 콜백 함수이다. 나는 위 모달을 댓글 스크린에서 사용했기 때문에, 키보드 입력창과 모달 visibility를 관리하였다.
style로 모달이 나타나는 위치를 조절 가능했는데, flex-end로 화면 bottom에서 모달이 나타나게끔 했으며, platform이 ios일 시에는 bottom bar을 추가적으로 고려해주었다.
react-native-modal
두 번째로 다뤄볼 건 react-native-modal이라는 서드파티 라이브러리이다. 사실, 난 처음에 이 라이브러리의 모달을 이용하여 모달을 만들었었다. react-native에서 기본 제공하는 Modal의 확장판이라기도 하고, 기본적으로 제공하는 함수가 더 많아보이는 이유에서였다.
import Modal from 'react-native-modal';
<Modal
isVisible={commentHandler.isModalVisible}
onBackdropPress={() => {
commentHandler.setIsKeyboardVisible(true);
commentHandler.setIsModalVisible(false);
}}
},
Platform.OS == 'ios' && {paddingBottom: insets.bottom},
]}>코드는 다음과 같다. 사실 간단한 모달 기능만을 이용했기 때문에, 기본 Modal보다 추가적으로 이용한 건 onBackDropPress 뿐이다. backdrop은 모달 뒤 보이는 반투명한 배경을 의미하는데, 이 반투명한 배경을 클릭하게 되면 실행되는 함수를 정의할 수 있다.
보통 모달에도 모달을 닫을 수 있는 버튼이 존재하지만, 사용자는 보통 닫기 버튼을 누르기보다는 backdrop 영역을 눌러 모달을 닫는게 더 익숙한 점을 고려해야 하기 때문에, 위 기능은 기본적으로 사용하는 것을 추천한다.
onBackdropPress, react-native의 Modal에서는?
그렇다면, onBackdropPress 기능은 모달 사용시 반드시 포함되어야 하는 기능인데 기본 Modal은 위 기능을 제공하지 않는다.
그렇다면 어떻게 구현해야 할까?
TouchableWithoutFeedback을 이용하면 된다.
TouchableWithdoutFeedback은 클릭했을 시 실행되는 onPress 함수를 정의 가능한데, 이때 모달이 표시되는 뒷배경을 컴포넌트로 감싸서 onBackdropPress를 구현할 수 있다.
주의할 점은, 모달이 표시되는 부분 또한 TouchableWithoutFeedback으로 감싸주어야 모달 배경 외 모달이 클릭됐을 시 함수를 독립적으로 처리 가능하다.
react-native vs react-native-modal
두 라이브러리의 모달의 기본 기능은 동일하다. 언급한 차이점은 onBackdropPress 여부인데, 그렇다면 기본 제공하는 react-native-modal이 더 좋아보일 수 있다.
사용하는 기능이나 개발하는 환경에 따라 다르겠지만, 나는 react-native-modal에서의 modal을 사용하다가 기본 modal로 변경한 케이스이다.
UI/UX적으로 굉장히 거슬리는 버그가 있어 변경하게 되었는데, 모달 visibility를 false로 변경하여 모달을 닫으려고 할 경우, 화면 전체가 살짝 깨지듯이 흔들리는 문제가 발생하였다. 개발할 당시에는 기능상으로는 문제가 없었기 때문에 괜찮다고 생각하였지만, 앱의 완성도를 생각해본다면 반드시 고쳐야 할 문제이기 때문에 다양한 방법을 알아보다가 react-native의 기본 modal은 이러한 현상이 없었기 때문에 변경하게 되었다.
하지만 내가 겪었던 문제는 지극히 나한테만 일어날 수 있는 개인 문제로, 어떤 Modal을 이용할 것인지에 영향을 끼칠지는 모르겠지만, 이 글을 통해 전하고 싶은 점은 Modal을 만드는 방법은 한가지가 아니니 자신이 개발하고자 하는 목적, 필요한 기능에 따라 선택하면 된다는 점이다.
오늘의 포스팅은 여기서 끝!
