Final Project - (10) 2020_0207

회원가입 컴포넌트를 본격적으로 만들기 시작하였다. 로그인 화면에서 signup 버튼을 누를 경우, 모바일 인증 화면으로 넘어가게 되고 그 다음 모바일 인증이 완료되면 회원가입 화면으로 넘어오게 된다.

 

우선은 컴포넌트가 스크롤이 될 수 있어야할 것 같아서 React-native의 ScrollView를 적용하였다. 그리고 하위 컴포넌트들은 리액트 네이티브 컴포넌트 라이브러리인 React native elements 컴포넌트들을 많이 이용하였다.

 

회원가입 시 받을 정보는 이메일, 비밀번호, 핸드폰 번호, 이름, 성별, 생년월일, 정보제공 동의 여부이다.

 

1. 이메일, 비밀번호, 이름

이메일과 비밀번호, 이름은 유저가 직접 입력할 수 있도록 input component로 만들어주었다. React native elements의 input 컴포넌트는 왼쪽에 아이콘을 설정할 수가 있다. 그래서 expo vector icon으로 각 항목에 어울리는 아이콘을 찾아서 넣어주었다.

label 설정으로 각 항목의 이름도 넣어주었다.

 

그리고 각 항목에 따라 useState로 state와 set 함수를 만들어주고, 각 input 컴포넌트의 onChangeText에 알맞는 set함수를 줘서 입력값을 state로 받을 수 있도록 하였다.

 

비밀번호 input의 경우에는 secureTextEntry 옵션을 통해 우리가 비밀번호 입력할 때 **** 이런식으로 나오게끔 할 수가 있다. 그래서 오른쪽에 눈깔모양 아이콘을 추가하고, secure라는 state를 추가 및 onPress method를 달아서 토글형식으로 누르면 비밀번호가 보이고 아니면 저렇게 텍스트 처리되도록 하였다.

 

이메일, 비밀번호, 이름 input component

 

 

2. 핸드폰 번호

핸드폰 번호의 경우, 회원가입 화면으로 오기 전에 모바일 인증 화면이 있다. 여기에서 모바일 인증을 거치고 회원가입 화면으로 넘어오는데 또 입력하는 것은 뭔가 맞지 않는것 같았다. 그래서 모바일 인증 후, 회원가입 화면으로 넘어올 때 navigation param으로 인증이 완료된 번호를 가지고 와서 이것을 그대로 렌더링 될 수 있도록 하였다!

 

모바일 인증 컴포넌트에서 인증 완료 버튼 관련 부분

모바일 인증 화면에서 인증 완료 후 버튼을 누르면 회원가입 화면으로 navigate되는데 그때, param으로 그 번호를 가지고 온다.

그리고 회원 가입 컴포넌트에서 props으로 navigation param을 받아 state로 저장해서 그것을 input창에 그대로 렌더링 되게 하였고, 수정이 안되도록 하였다.

 

모바일 input component

 

핸드폰 번호 input 컴포넌트

 

3.  생년월일

이번 회원가입 화면에서 하이라이트 부분이다. 사실 그냥 입력하게 할 수도 있었으나, 어플다운 느낌을 내고 싶어서 캘린더에서 생년월일을 고르도록 만들고 싶었다. 그래서 찾아보다가 react-native-madal-datetime-picker라는 라이브러리를 찾았다.

 

모달창으로 캘린더 모양이 나오고 (안드로이드 기준) 연도와 날짜를 고르고 확인을 누를수 있게 되어있다.

 

picker 모달창

 

우선은 다른 항목들과 통일성을 위해서 input 컴포넌트를 똑같이 만들어주고, 오른쪽에 달력모양의 아이콘을 추가해주었다.

 

생년월일 input

input에 placeholder만 해놓고 입력은 막아두었다. 그리고 저 아이콘을 누르면 모달창이 뜨도록 했다.

 

모달창의 경우 isVisible이라는 속성이 true일시 보이고, false일시에는 보이지 않는다. 그래서 show라는 state를 설정해주고 defalt는 false로 설정하였다. 그리고 달력 아이콘을 누를 경우, onPress의 setShow 함수를 통해 state가 true로 되도록하였다.

 

생년월일 input component

여기까지는 문제없이 잘 되었다. 누를 경우 모달이 뜨고 생년월일을 선택할 수 있다. 문제는 이 다음이다. 밑에는 모달 컴포넌트이다.

picker modal component

현재는 저렇게 되어있지만 문제가 발생했을 때는 다음과 같은 코드로 작성되어 있었다.

 

            <DateTimePickerModal
              mode="date"
              isVisible={show}
              onConfirm={(d): void => {
                if (d) {
                  setDate(d);
                  setShow(false);
                }
              }}
              onCancel={(): void => setShow(false)}
            />

조건부 렌더링과 onConfrim의 set함수의 순서가 아까와 다르다.

 

setDate는 유저가 연도,날짜 선택 후 확인을 누르면 그때의 연도날짜를 state로 저장해주는 함수이다. onConfirm은 모달창의 확인 버튼을 누를때 실행되는 것으로 모달창이 닫힌다. 

 

아까 달력 아이콘을 누르면서 isVisible이 true로 바뀌면서 리렌더링이 이루어지면서 모달창이 뜨는 것 까지는 괜찮았다. 문제는 연도, 날짜 입력 후 확인을 누를 때 인데 일단 모달창이 닫히면서 setDate가 먼저 실행되면서 연도 날짜를 state에 저장한다. 그런데 set 함수는 다시 리렌더링을 하기 때문에 그 다음 함수인 setShow가 false로 되기전에 다시 리렌더링이 되면서 모달창이 다시 떠버린다. 모달창이 두번연속으로 떠버리는 것이다. 

 

그래서 이 문제를 해결하기 위해서, 우선은 set 함수의 순서를 바꿔주었다. show의 값이 false로 먼저 되도록 하였다. 그리고  show 값에 따라 조건부렌더링이 되도록 만들어주었다. 그래서 위와 같이 코드가 바뀌게 되었고, 연도와 날짜를 고르고 확인을 누르는 순간, show 값이 false로 먼저 바뀌면서 정상적으로 렌더링이 제어가 되었다.

 

그리고 생년월일 input값의 value는 setDate로 바뀌는 state값을 렌더링하기 때문에 고르는 순간 생년월일이 렌더링된다.

 

4. 성별

성별은 남자 아니면 여자 둘중 하나이기 때문에 입력보다는 선택을 하도록 하고 싶었다. 그래서 어떻게 만들면 좋을까 생각하다가 elements의 ButtonGroup을 이용해서 둘 중 하나를 선택하고 버튼그룹의 onPress에 set함수로 성별이 설정되도록 하였다.

 

ButtonGroup component

 

5. 개인정보 수집 동의

이 부분은 다른 팀원분이 넣으셨는데 내가 디자인이랑 텍스트 줄바꿈만 다시 손을 봤다.

개인정보 제공 동의 컴포넌트 및 체크박스

 

elements의 CheckBox를 넣어서 동의 시 체크 될 수 있도록 만들었다. 체크 시, onPress를 통해서 set함수로 check상태가 토글 형식으로 된다.

 

 

6. 회원가입 버튼 

 

회원 가입 버튼의 onPress에는 조건문을 넣어주었다. 회원 가입 시 정보를 다 입력하지 않고, 버튼을 누를 경우 서버로 전송 되는 것을 막기 위해서 넣었다.

 

제일 먼저 체크하는 것은 개인 정보 수집 동의이다. 버튼 누를 시에 if 문을 통해 check상태가 true가 아니면 Alert 메시지를 통해 동의를 해달라고 메시지가 나온다.

 

그리고 동의 상태이면 그 다음으로는 아까 입력 했던 각 항목들을 체크해준다. useState에서 각 항목들의 default 값이 undefined로 해놨기 때문에 (핸드폰 번호 제외) else if문으로 각 항목들 중에 falsy한 값이 있으면 마찬가지로 Alert 메시지로 빠진 항목을 체크해 달라는 메시지가 나오도록 하였다.

 

이 과정도 조건문을 통과하면 그 다음은 서버로 데이터를 전송하는 것이다. axios를 통해 이메일,비밀번호,이름, 핸드폰, 생년월일,성별을 전송한다. 그리고 then()으로 전송이 완료되면 로그인 화면으로 다시 navigate 시키도록 되어 있다.

 

회원가입 버튼 누를 시, 조건문

 

---

말로 풀어내니 금방 만든 것 같지만.... 은근히 시간이 오래 걸렸던 작업이였다. 

 

처음으로 제대로 만드는 컴포넌트라서 디자인 부분을 고려하고 style을 한땀한땀 작업하느라 시간이 오래 걸렸고, elements 의 여러 컴포넌트 사용과 이 컴포넌트들을 커스터마이징해서 쓰려다보니 찾아볼게 많았다. 또한 픽커 부분 렌더링 문제 때문에 시간도 많이 잡아 먹히고... 만들어줄 컴포넌트도 꽤 많아서 이래저래 시간이 참 오래걸렸다. 

 

만들다가 또 한번 벽에 부딪힌 것이 있는데 axios와 keyboardavoidingview 문제이다. 이건 다음 데브로그에서 풀어보고자한다.