React Native Picker 컴포넌트란?
React Native의 Picker 컴포넌트는 드롭다운과 유사한 역할을 하는 UI 요소로, 제공된 여러 옵션 중에서 하나의 값을 선택할 수 있도록 해줍니다.
기본적인 Picker 컴포넌트의 구조는 다음과 같습니다.
<Picker selectedValue = {selectedelement} onValueChange = {updatefunc}>
<Picker.Item label = "ItemLabel" value = "ItemValue" />
...
...
...
<Picker.Item label = "ItemLabel" value = "ItemValue" />
</Picker>
Picker 컴포넌트를 사용하려면 먼저 react-native에서 해당 컴포넌트를 임포트해야 합니다.
import { Picker } from 'react-native'
참고: React Native 0.60 버전 이후로 Picker는 코어 라이브러리에서 분리되어 @react-native-picker/picker라는 별도 패키지로 이동되었습니다. 최신 프로젝트에서는
npm install @react-native-picker/picker명령으로 설치한 후import { Picker } from '@react-native-picker/picker'형태로 사용하는 것이 좋습니다.
Picker 주요 속성(Props)
| 번호 | 속성 및 설명 |
|---|---|
| 1 | enabled 불리언(boolean) 값을 받습니다. false로 설정하면 Picker가 비활성화되어 사용자가 항목을 선택할 수 없습니다. |
| 2 | itemStyle Picker의 각 항목에 적용할 스타일을 지정합니다. |
| 3 | mode 항목을 어떤 방식으로 표시할지 결정합니다. 사용 가능한 옵션은 dialog와 dropdown 두 가지입니다. dialog 모드에서는 모달 대화상자 형태로 항목이 표시되고, dropdown 모드에서는 일반적인 드롭다운 형태로 나타납니다. |
| 4 | onValueChange 사용자가 항목을 선택했을 때 호출되는 콜백 함수입니다. 매개변수로 선택된 실제 값인 itemValue와 해당 항목의 인덱스 위치인 itemPosition이 전달됩니다. |
| 5 | selectedValue 현재 Picker에서 선택된 값을 나타냅니다. |
예제: Picker를 이용한 드롭다운 표시하기
아래 예제는 Picker 컴포넌트를 사용해 드롭다운을 화면에 표시하는 방법을 보여줍니다.
핵심 코드는 다음과 같습니다.
<Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
<Picker.Item label = "Steve" value = "steve" />
<Picker.Item label = "Ellen" value = "ellen" />
<Picker.Item label = "Maria" value = "maria" />
</Picker>
이 Picker에는 Steve, Ellen, Maria라는 세 가지 값이 포함되어 있습니다. 전체 코드는 아래와 같습니다.
import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
class PickerExample extends Component {
state = {user: ''}
updateUser = (user) => {
this.setState({ user: user })
}
render() {
return (
<View>
<Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
<Picker.Item label = "Steve" value = "steve" />
<Picker.Item label = "Ellen" value = "ellen" />
<Picker.Item label = "Maria" value = "maria" />
</Picker>
<Text style = {styles.text}>{this.state.user}</Text>
</View>
)
}
}
export default PickerExample
const styles = StyleSheet.create({
text: {
fontSize: 30,
alignSelf: 'center',
color: 'red'
}
})
코드에서 this.state.user가 Picker의 상태를 제어하며, 사용자가 항목을 선택하면 updateUser 함수가 호출되어 상태가 갱신됩니다. 갱신된 값은 하단의 Text 컴포넌트에 그대로 출력됩니다.
실행 결과
앱을 실행하면 초기 화면은 다음과 같습니다.
Picker를 열어 이름을 선택하면 아래와 같이 선택된 값이 화면에 표시됩니다.
