지난 포스팅에서는 React Natvie의 컴포넌트에 대해 알아보고 Image 컴포넌트를 사용해 보았습니다.오늘은 앱의 기본이 되는 버튼 컴포넌트에 대해 알아보고 실제 버튼을 구현하는 과정에 대해 포스팅해보려고 합니다. 그리고 버튼 컴포넌트 외에도 버튼의 기능을 제공할 수 있는 다른 컴포넌트에 대해서도 알아보려고 합니다. 사실 버튼 컴포넌트를 공부하지만 기본적인 앱을 구현할 때 오히려 다른 컴포넌트를 이용해 버튼을 많이 구현합니다. 그럼 시작하겠습니다.
1. React Native Android 에뮬레이터에서 실행하기
우선 하단 네비게이션 바를 구현하기에 앞서 기존에는 실제 디바이스에서 Expo 앱을 통해 만들어진 앱을 확인했지만 사용하고 있는 PC와 스마트폰의 와이파이를 동일하게 연결해야만 하는 번거로움이 있어 우선 안드로이드 스튜디오 에뮬레이터를 이용하고자 합니다.
1) 우선 PC에 안드로이드 스튜디오를 설치해줍니다. 안드로이드 스튜디오 설치는 무료로 아래 링크를 통해 간단히 설치할 수 있습니다.
https://developer.android.com/studio?hl=ko
Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android Developers
Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.
developer.android.com
2) 안드로이드 스튜디오를 설치 후 안드로이드 에뮬레이터를 사용하기위한 아래 SDK를 설치해줍니다. 저는 예전에 사용했던 적이 있어 아무 생각 없이 에뮬레이터를 생성 후 진행했는데 제대로 돌아가지 않아 이것저것 해보다 보니 아래 SDK를 신규 SDK로 설치 및 업데이트하니 제대로 돌아 갔습니다. 각각 SDK이 어떠한 역할을 하는지 정확히는 모르나 혹시 안된다면 SDK Manager에서 해당 SDK 들을 적용하시는 것을 추천 드립니다. 참고로 SDK Manager는 우측 상단 “Get from VCS” 버튼 옆에 점 세 개 더 보기 버튼을 클릭하면 SDK Manager를 실행할 수 있습니다.
- Android SDK Build-Tools 35-rc3
- Android Emulator
- Android SDK Platform-Tools
- Intel x86 Emulator Accelerator
3) 다음으로 Virtual Device Manager를 통해 에뮬레이터를 생성해줍니다. 에뮬레이터 생성을 위해 안드로이드 스튜디오를 처음 실행하면, 우측 상단 “Get from VCS” 버튼 옆에 점 세 개 더 보기 버튼을 클릭하면 Virtual Device Manager를 실행할 수 있습니다. 그럼 왼쪽 상단 Create device 버튼을 통해 가상 머신을 생성할 수 있고 저는 제가 사용하고 있는 스마트폰과 같은 크기의 Pixel5 가상 머신을 생성했습디다. API는 별다른 이유 없이 이미 다운로드 되어 있는 34를 선택했습니다. 마지막으로 이름을 입력 후 생성을 마무리 해주면 해당 이름의 가상 디바이스가 생성됨을 확인 할 수 있습니다.
4) 생성된 디바이스 왼쪽 플레이어 아이콘(▶) 같이 생긴 버튼을 클릭해주면 에뮬레이터가 실행됩니다. 여기서 만약 에뮬레이터를 실행했는데 계속 검은색 화면만 뜨고 아무것도 진행되지 않는다면 일단 에뮬레이터를 종료하고 실행 버튼 옆에 아래쪽 방향을 가리키는 세모를 클릭 후 Cold Boot Now를 선택해 실행하면 해결되는 경우가 있으니 참고 부탁드립니다.
5) 에뮬레이터까지 정상적으로 실행되면 Expo앱에서 실행했을 때와 동일하게 npx expo start 명령어를 입력해 앱을 실행해준 후 모두 진행되면 “a” 버튼을 눌러 안드로이드 에뮬레이터에서 실행하면 됩니다. a 버튼을 누르면 자동으로 열려 있는 에뮬레이터에 Expo 앱을 설치 후 실행시키는 것을 확인할 수 있습니다.
2. Button 컴포넌트
Button 컴포넌트는 말그대로 버튼을 구현할 수 있는 컴포넌트이며 아주 쉽게 만들 수 있는 기본 제공 컴포넌트입니다. 때문에 주로 간단한 사용자 UI를 만들 때 유용합니다.
우선 기본적으로 아래와 같은 코드를 이용해 버튼을 구현할 수 있습니다.
<Button title="Press Me"
onPress={() => Alert.alert('Button pressed!')}
color="#841584" // Optional
/>
위에 코드에서 보면 알 수 있지만 버튼 컴포넌트는 여러 속성값을 갖고 있습니다.
그 중에서 버튼에 표시될 속성을 나타내는 ‘title’ 속성과 버튼이 눌렸을 때 실행될 함수가 들어가는 ‘onPress’ 속성은 필수 속성입니다. 필수 속성을 봤을 때 위에 코드는 “Press Me”라는 이름의 버튼을 만들고 버튼을 누르면
“Button pressed”라는 알람이 뜨는 코드입니다.
다음으로 버튼 컴포넌트는 버튼의 배경 색상을 나타내는 color 속성과 버튼을 비활성화 상태로 만드는 disabled 속성, 테스팅 도구에서 버튼을 식별할 때 사용하는 ID인 testID 속성 등이 있습니다. 이러한 속성들은 선택 속성으로 구현 시 꼭 나타낼 필요는 없습니다. 또한 참고로 disabled속성은 기본값이 false로 설정되어 있어 값을 지정하지 않으면 false 값을 의미하게 됩니다, 위에 코드는 그 중에서 color 속성을 #841584 값으로 지정해 버튼의 색상을 변경해준 것 입니다.
이를 실행하면 아래와 같은 화면과 버튼을 눌렀을 때 알람이 뜨는 것을 볼 수 있습니다.
이렇게 쉽게 버튼을 구현할 수 있지만 실제 앱을 구현하다 보면 버튼내에 단순히 색과 글자뿐만 아니라 icon 및 이미지를 넣어 버튼을 구현해야 하는 경우가 많이 발생합니다. 이럴 때 사용할 수 있는 컴포넌트로 TouchableOpacity가 있습니다.
2. TouchableOpacity로 버튼 구현하기
TouchableOpacity는 React Native에서 사용자가 터치할 수 있는 요소를 만들 때 사용하는 컴포넌트입니다. 터치 이벤트가 발생했을 때 요소의 불투명도를 조절하여 시각적인 피드백을 제공합니다. 사용자가 터치했을 때 요소가 살짝 투명해지는 효과를 통해 시각적인 피드백을 제공하여 상호작용성을 높입니다.
TouchableOpacity의 컴포넌트로는 아래 속성값을 가질 수 있습니다.
1) activeOpacity: 터치했을 때 불투명도가 변화되는 정도를 설정합니다. 기본값은 0.2입니다.
2) onPress: 터치 이벤트가 발생했을 때 실행할 함수를 지정합니다.
3) onLongPress: 길게 눌렀을 때 실행할 함수를 지정합니다.
4) style: TouchableOpacity의 스타일을 지정합니다.
5) disabled: true로 설정하면 버튼이 비활성화됩니다.
6) hitSlop: 터치 가능한 영역을 확장할 때 사용합니다.
7) delayPressIn, delayPressOut, delayLongPress: 터치 이벤트에 대한 딜레이를 설정합니다.
TouchableOpacity를 이용해 간단히 icon으로 이루어진 버튼을 만드는 코드는 아래와 같습니다.
아래 코드는 다른 컴포넌트와 똑같이 style속성을 이용해 버튼의 스타일을 만든 후 버튼 컴포넌트의 onPress와 동일하게 알람 컴포넌트를 통해 버튼을 누르면 Button star pressed라고 적힌 알람이 뜨도록 구현하였습니다. 그리고 Expo에서 기본으로 제공하고 있는 아이콘을 이용해 별 모양 아이콘을 가져와 TouchableOpacity 컴포넌트안에 넣어 별 모양만으로 이루어진 버튼을 구현하였습니다. 참고로 expo에서 기본으로 제공하는 아이콘을 사용하기 위해서는 그에 맞는 라이브러리를 import해줘야 하며 이는 해당 아이콘을 검색할 수 있는 사이트에서 쉽게 찾을 수 있습니다. 따라서 해당 코드를 구현하기 위해서는 아래 코드를 import 해줘야 합니다. 이에 대해서는 나중에 상세히 소개해보겠습니다.
import { AntDesign } from '@expo/vector-icons';
<TouchableOpacity style={styles.button} onPress={() => Alert.alert("Button star pressed")}>
<AntDesign name="star" size={24} color="black" />
</TouchableOpacity>
마무리
오늘은 이렇게 개발할 때 편리하기 위해 안드로이드 스튜디오의 가상 에뮬레이터를 이용해 Expo 앱을 실행해보는 방법과 Button 컴포넌트와 조금 더 버튼을 커스터마이징 할 수 있는 컴포넌트인 TouchableOpacity에 대해 알아보고 간단한 코드를 공부해봤습니다. 다음 포스팅에서는 본격적으로 앱을 개발하면서 가장 처음 구현이 필요한 하단 탭 네비게이션에 대해 알아보고 구현해보겠습니다.