[React Native] Selected-dropdown 을 만들어보자

배경

졸업 작품으로 서비스 구현 중에 회원가입 창을 만들어야되는 일이 생겼다.
(문제가 많지만 알고있다....)
전화번호를 기존에는 TextInput 컴포넌트를 이용해서 그림과 같이 슬래시까지 양식 맞춰서 알아서 입력해라 식이였는데, 생각해보니 user입장에서는 짜증날것 같았다. 사실 내가 그랬다.

구글 폼같은데에서 가끔가다 설문조사 할 때 양식 맞춰서 입력하라 그러는데, 그걸 왜 사용자가 해야되는가? 애초에 입력받을때 깔끔하게 입력받으면 되지 않을까? 라고 생각하게 되었다.

그래서 RN의 select-dropdown 컴포넌트를 이용하여 010부분을 만들고 나머지 5547부분 따로, 1405 따로 textinput 컴포넌트를 생성한후에 상태를 관리하고, 서버에 보낼때에 합쳐서 주는 그런식으로 구현하려고 한다.

이미 다들 이렇게 하고 있는것 같다.

구현

우선 https://www.npmjs.com/package/react-native-select-dropdown 이 공식 문서에 따라해보자. 공식문서만큼 신뢰성 높은건 없다.

npm install react-native-select-dropdown

컴포넌트를 프로젝트에 설치해준다.

뭐 이렇게 쓰라는데... 사실 이걸 고대로 스크린에 가져다가 붙이면 라인이 300줄은 넘어갈꺼같고 가시성도 안좋을것같다.
그래서 객체지향이니 만큼 따로 관리하고, 데이터만 넘겨주는걸로!

component폴더에 selectDropDown.tsx파일을 생성한다.

다음과 같이 코드를 써주면 된다.

import React from "react";
import { View, Text } from "react-native";
import SelectDropdown from "react-native-select-dropdown";
import Feather from 'react-native-vector-icons/Feather';
import styles from "../Screen/StyleSheet";

type SelectDropDownProps = {
  data: { title: string }[];
};

const SelectDropDown: React.FC<SelectDropDownProps> = ({ data }) => {
  return (
    <SelectDropdown
      data={data}
      onSelect={(selectedItem, index) => {
        console.log(selectedItem, index);
      }}
      renderButton={(selectedItem, index) => {
        return (
          <View style={styles.DropDownButton}>
            <Text
              style={{
                fontFamily: 'Pretendard-Regular',
                fontSize: 18,
                color: '#696969',
              }}>
              {(selectedItem && selectedItem.title) || 'Number'}
            </Text>
            <Feather name={index ? 'chevron-up' : 'chevron-down'} />
          </View>
        );
      }}
      renderItem={(item, index, isSelected) => {
        return (
          <View style={{ ...styles.DropDownItem, ...(isSelected && { backgroundColor: '#D2D9DF' }) }}>
            <Text
              style={{
                fontFamily: 'Pretendard-Regular',
                fontSize: 18,
                color: 'black',
              }}>
              {item.title}
            </Text>
          </View>
        );
      }}
      showsVerticalScrollIndicator={false}
      dropdownStyle={styles.DropdownMenu}
    />
  );
};

export default SelectDropDown;

React.FC(fuctional component)타입을 이용하여, data의 타입을 정의 해준다. 어차피 내가 옵션에서 보여줄꺼는 string밖에 없기 때문에, SelectedDropDownProps를 다음과 같이 정의했다.

나머지는 기존 selectDropdown에서 쓰는것처럼 작성해주었다.

data prop은 버튼을 눌렀을때 보여줄 데이터
onSelect prop은 옵션을 선택했을때 발생하는 핸들러
renderButton은 dropdown버튼 누르기 전에 보이는 컴포넌트
renderItem은 버튼 누르면 보이는 Item
showsVerticalScrollIndicator 옆에 스크롤 보이게 할지 유무
dropdownStyle은 버튼 누르면 보이는 dropdownview의 스타일, dropdownview안 item이 있는거다.

실제 사용할때에는 이런식으로 사용하면 된다.

const phoneNumList = [
      {title: '010'},
      {title: '011'},
      {title: '016'},
      {title: '017'},
      {title: '018'},
      {title: '019'}
    ]

<SelectDropDown
              data={phoneNumList}
              />

후기

요즘 졸업작품을 만들면서 거진 하루에 코드 300줄은 기본으로 쓰는것같은데, 이렇게 클래스화 하지 않으면,view view view 이런식으로 엄청 쌓여있기때문에 찾기 힘들고, 수정도 힘들다. 위처럼 데이터만 띡 전해주면 바로 나올수 있게 클래스화 해놓으면, 다른 파일에서도 일일히 복붙할 필요없어진다. 객체지향의 중요성을 여기서 느끼게 되는거 같다.