[React-Native] Modal 구현하기

GimQuokka
GimQuokka
Feb 11 · 6 min read
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이라고 써져있던 버튼문구를 대체하여 표시됩니다.

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

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

맺음말

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

GimQuokka

Written by

GimQuokka

Make, and record VERY steadily

More From Medium

Also tagged React

Also tagged Frontend

Top on Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade