[React-Native] Modal 구현하기

[React-Native] Modal 구현하기

Question-mark?

개요

Modal이라는 단어를 몰랐을 때 부터 이를 실제 App에 적용하기 까지 과정을 정리하려고 합니다. 간단한 글이지만 누군가에게는 도움이 되었으면 합니다. 🙏

Modal이란?

“모들 윈도(Modal Window)는 사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창을 말한다.” — 위키백과

라고 기술되어 있는데요. Modal이라는 단어를 처음 접하시는 분들은 이렇게만 보면 정말 감 안오시죠?

일반적으로 사용되는 Modal창 예시 Gif

용어는 생소하실 수 있지만 우리가 실제로 App과 Web에서 자주 봐 왔던 UI입니다. Modal을 이용하면 사용자에게 특정 행동(선택)을 요구할 수 있습니다. 주는 Props값(옵션)에 따라서 특정 행동을 하도록 강제할 수도 있고, 주변화면을 터치하여 Modal 창을 사라지게 할 수도 있습니다. 백문이 불여일견! 우리는 개발자이기 때문에 실제로 코드를 보면서 얘기를 하는 것이 빠르겠죠?🤓

RN으로 Modal 구현하기

Used library

코어 라이브러리로는 크게 React-Native 안의 기본 Modal과 react-native-community의 react-native-modal가 있습니다.

“The goal of react-native-modal is expanding the original react-native Modal”

이라고 react-native-modal의 README에 나와 있듯이 react-native-community의 modal은 기본 React-Native Modal의 확장판이라고 볼 수 있습니다. 같은 기능을 구현할 수 있고, 줄 수 있는 Props 또한 community의 것이 훨씬 더 다양합니다. 저 또한 프로젝트에서 위와 같은 이유로 react-native-modal을 사용하였고, 이 글에서 또한 react-native-modal을 사용합니다.

yarn add react-native-modal or npm i react-native-modal

를 RN 프로젝트 내에서 입력하여 라이브러리를 다운받아 줍니다.

Example Code

ModalExample.tsx (Styled-Componet, React-Hooks 사용)

소스 코드의 예시는 위와 같습니다. 주석처리를 해서 “이런식으로 쓰이는 구나”하고 보시기에 괜찮을 것 같습니다. 참고할만한 곳을 좀 집고 넘어가자면

Using SafeAreaView as Container

SafeAreaView를 Container로 활용하게 되면 아이폰 등에서 View에 상단에 margin 값을 줄 필요 없이 노치 아래 부분부터 Rendering시켜줍니다.

Using View as Line in Modal window

모달의 TouchableOpactiy에 border을 주어도 되지만 클릭시 글자만 효과가 먹길 바래서 Line을 View을 이용하여 따로 구현하였습니다. 웹에서는 선을 긋는 태그가 있는 것 같은데 RN에서는 선 하나 때문에 라이브러리를 받는 것도 낭비인 것 같고 그래서 View를 이용하여 모달의 선택지 사이에 선을 그어주었습니다. 더 좋은 방법을 아시는 분은 알려주시길…

To control Modal window use isVisible Props

modalVisible이라는 state 값을 설정하여 Modal의 isVisible Props에 물려줍니다. Props의 이름에서 알 수 있듯이 state 값이 true이면 모달창이 나타나고, false이면 사라집니다.(Props이름 참 잘지었네요..ㅎ)

Use state to control Modal

선택지 마다 onPress Event를 걸어줘 선택시 isVisble와 OutPut을 출력될 state가 바뀌도록합니다.

{/* 모달에서 선택 결과 값을 State로 받아서 화면에 표시 */}
      <StyledModalOutputText> {modalOutput} </StyledModalOutputText>

결과 값은 위와 같이 Modal Open이라고 써져있던 버튼문구를 대체하여 표시됩니다.

모달 구현을 위한 다른 서드파티 라이브러리들

maxs15/react-native-modalbox A react native component, easy, fully customizable, implementing the ‘swipe down to close’ feature. npm install…github.com

jacklam718/react-native-modals A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS…github.com

Modal 구현을 위한 다른 서드파티 라이브러리 중에서 유명한 것은 위 두개 정도 있는 것 같습니다. 개인적인 생각으로는 제가 사용한 Community 라이브러리의 Props들만 사용하셔도 원하는 Modal을 충분히 구현하실 수 있고, 번거롭더라도 직접구현하는게 dependency나, 커스터마이즈 부분에서 용이하다고 생각합니다. 그리고 아무래도 Community Library들이 다른 서드파티 Library보다 조금 더 Bug free하지 않나 생각해봅니다.

맺음말

간단한 내용을 길게 풀어서 기술한 감이 있습니다. 개인적으로 RN공부시작 한지 얼마 안된 초창기에 내용만 익히기도 버거운데, 한국어로 된 자료가 없어서 영어로 공부하느라 힘들었던 경험이 있는데요. 이미 경력이 조금있는 분들에게는 너무 쉬운 글 일 수도 있지만, 시작한지 얼마 안된 분들에게, 혹은 누군가에게는 꼭 이 글이 도움이 되었으면 합니다.🙏🏻