Project — Day7 “Picker: 리액트 네이티브 드롭다운 만들기”
Published in
4 min readJun 8, 2020
코드스테이츠 4주 프로젝트
2020.06.08
Picker — react-native 드롭다운 리스트 만들기
회원가입할 때 추가적으로 연령대와 성별 정보를 받는 스크린이 있는데, 이 때 연령대를 선택할 수 있는 드롭다운 리스트를 만들었다.
처음에 검색했을 때 react-native-material-dropdown 관련 정보가 많이 나와서 사용했었는데 그냥 깔끔하게 모달창 처럼 나오는게 괜찮은 것 같아서 Picker로 넘어갔다. (찾아보니 custom해서 쓸 수 있는 방법이 많은 것 같았는데 기능 구현에 초점을 맞추고 싶어서 깔끔하게 포기!)
타입스크립트를 사용하고 있어서 타입스크립트용으로 설치해줬다.
npm i --save @types/react-native-community/picker타입스크립트가 아니라면 그냥 이걸 설치하면 된다.
npm i --save react-native-community/picker그 다음 구현해줄 파일에서 아래와 같이 Picker 컴포넌트를 불러와준다.
import { Picker } from "@react-native-community/picker";사용법은 간단하다. 그 간단한걸 나는 오래 걸려서 성공해서 문제지만! ㅎ
먼저, 리스트를 만들 곳에 아래와 같이 Picker 컴포넌트를 넣어준다.
<Picker
style={[styles.picker]} //스타일 지정
selectedValue={value.age} //제일 위 선택란에 누른 아이템이 표시된다
onValueChange={(itemValue, itemIndex) => {
setValue({ age: itemValue })
}} //value가 바뀌면 상태를 변경해준다
>
</Picker>그리고 이 안에 세부 항목을 넣어준다. Picker.Item이 리스트 안에 들어가는 항목이다.
<Picker.Item label="나이를 입력하세요" value="" />
<Picker.Item label="10대" value="1" />
<Picker.Item label="20대" value="2" />
<Picker.Item label="30대" value="3" />
<Picker.Item label="40대" value="4" />
<Picker.Item label="50대 이상" value="5" />그러면 리스트에 제일 처음에는 "나이를 입력하세요"가 보이고, 그 밑으로 10대, 20대, 30대 ... 가 보인다. 나는 value를 숫자로 지정해주었다. 그렇게 디비에 넣을 꺼기 때문에!
사실 전체 코드라 이것만 보고는 따라 할 수 없지만, 간단하게 적어봤다.
데일리 리뷰
오늘의 객관적 사실
- 회원가입 페이지 뷰 작성
- 회원가입 유효성 검사 작성
- 추가 정보 페이지 중 나이 입력 드롭다운 작성
- 우분투에서 가상 아이폰을 돌리는 것은 쉬운일이 아니었다. 결국 잘 안돼서 안드로이드 기종에 맞추기로 했다.
- Android-studio 설치해서 가상 안드로이드 폰을 띄워봤는데 컴퓨터가 어마무시하게 느려져서 사용을 왠만해선 안할 것 같다. 후 ^^
오늘의 느낌
- 프론트엔드 너무 어렵다! react-native 도 처음인데, typescript도 처음 saga, hooks도 처음, reducer 사용법 미숙.. 갈길이 멀다. 잘하고 싶은 욕심이 많은 만큼 시작이 더디니 마음이 조금 조급하다. 특히 같이 하시는 분이 워낙 잘하셔서 도움만 받는 것 같아서.. ㅎㅎ 그래도 너무 잘 도와주셔서 감사하다.
오늘의 교훈
- 리액트 네이티브... 크로스 플랫폼이라고 얕보면 안된다. 생각보다 맞춰줘야하는 것이 많다!!!! 왜 처음에 엔지니어분들이 둘중에 하나만 하는 걸 고려해보라고 했는지 알겠다.
- 처음에 좀 더딘 것 같아도 3주뒤에 또 폭풍성장해있을 나를 바라보면서 하나씩 하나씩 전진!!! 도움 요청.. 얼굴에 철판깔고 많이 할 예정!
