최근 직장을 옮기면서 맡은 첫 업무 중 하나가 React Native로 바텀 시트(Bottom Sheet)를 구현하는 것이었습니다.
네이티브 안드로이드 개발 출신이라 네이티브에서 바텀 시트를 만들 때만큼 까다로울 거라고 생각했지만, 큰 착각이었습니다! 그만큼 놀라운 경험이었기에 React Native로 바텀 시트를 만드는 방법을 간단한 튜토리얼로 정리하게 되었습니다.
바텀 시트란 무엇일까?
바텀 시트는 화면 하단에서 위로 슬라이드되어 올라오며, 주로 다양한 선택 옵션을 담는 UI 컴포넌트입니다. Uber나 Zomato 같은 앱에서도 흔히 볼 수 있듯이 현대적인 앱 디자인에서 매우 널리 사용되는 요소입니다.
완성된 결과물은 아래와 같습니다.
시작하기
먼저 React Native로 새 프로젝트를 생성합니다. 이번 튜토리얼에서는 expo-cli를 사용합니다. expo-cli가 낯설거나 React Native를 처음 시작하는 분이라면 공식 문서를 먼저 참고하는 것을 추천합니다.
프로젝트 이름은 BottomSheetDemo로 지정했습니다.
다음으로 react-native-modalbox 라이브러리를 설치해야 합니다. 이 라이브러리는 애니메이션, 위치 지정, 배경(backdrop) 처리 등 다양한 기능을 기본적으로 제공합니다.
$ expo install react-native-modalbox@1.7.1
참고: 반드시 1.7.1 버전을 설치하세요. 최신 버전에는 backdropPressToClose 속성이 동작하지 않는 버그가 있습니다.
모달 만들기
이제 본격적으로 모달을 만들어 보겠습니다. 프로젝트 생성 시 기본으로 제공되는 코드를 삭제하고, App.js 파일에 아래 코드를 추가합니다.
위 코드가 바텀 시트(모달)의 기본 골격입니다. 일단은 모달 중앙에 텍스트 하나만 표시하도록 구성했습니다.
인터랙션 추가하기
버튼을 눌렀을 때 바텀 시트가 열리고 닫히도록 만들어야겠죠? 화면 중앙에 간단한 버튼을 추가해 보겠습니다.
버튼을 클릭하면 바텀 시트를 보여주거나 숨겨야 합니다. 이를 위해 React의 useState 훅으로 상태(state)를 관리합니다.
모달에는 isOpen이라는 prop이 있으며, 이 값을 토글해서 바텀 시트를 열고 닫을 수 있습니다. 화면에 표시하려면 modalVisible 상태를 true로 설정하고, 숨기려면 false로 설정하면 됩니다.
그런데 코드가 점점 복잡해지고 있습니다. 가독성을 위해 모달 부분을 별도 함수로 분리해 보겠습니다. 모달 JSX를 반환하는 함수를 새로 만들면 됩니다.
훨씬 깔끔해졌죠? 하지만 아직 우리의 바텀 시트는 '진짜' 바텀 시트답게 보이지 않습니다. 스타일을 입혀야 할 때입니다.
스타일 추가하기!
StyleSheet를 생성하고 다음과 같은 스타일을 추가합니다.
완성된 최종 코드는 아래와 같습니다.
마무리
드디어 React Native로 바텀 시트를 완성했습니다. 생각보다 훨씬 간단했고, 네이티브 안드로이드에서 구현할 때보다 훨씬 수월했습니다.
iOS는 직접 경험해 보지 못해 논하기 어렵지만, iOS 개발자이시거나 iOS에서 바텀 시트를 구현해 보신 분이 계시다면 어떤 경험이었는지 공유해 주시면 감사하겠습니다.
모바일 개발자들을 위한 AndroidVille SLACK 워크스페이스도 운영되고 있습니다. 최신 기술 트렌드, 특히 안드로이드 개발, RxJava, Kotlin, Flutter 등 모바일 개발 전반에 대한 학습 내용을 나누는 커뮤니티입니다. 참여는 완전 무료이니 링크를 통해 가입해 보세요.
이 글이 도움이 되었다면 Facebook, WhatsApp, LinkedIn으로 공유해 주세요.
필자는 LinkedIn, Quora, Twitter, Instagram에서 모바일 개발, 특히 안드로이드와 Flutter 관련 질문에 답변하고 있습니다.