[인스타그램 클론코딩] 앱 회원가입 구현

[인스타그램 클론코딩] 앱 회원가입 구조 포스트 내용을 바탕으로 실제 회원가입을 구현해 보겠습니다.

AuthNavigation.js

AuthNavigation은 (App 컴포넌트가 마운트될 때 Async Storage에서 사용자 정보를 가져오지 못해서) App 컴포넌트의 isLoggedIn 상태가 false일 때 라우팅되는 네비게이션 컴포넌트입니다.

참조: [인스타그램 클론코딩] 앱 로그인 구조

Login → Signup → Confirm 스크린 순서로 회원가입 및 사용자 인증까지 마무리되며, 회원가입은 했는데 인증을 안하고 나중에 로그인한 경우 Login 스크린에서 바로 Confirm 스크린으로 이동합니다.

Signup.js

회원가입과 관련 없는 코드 및 오류처리 코드는 제외했습니다.

사용자로 부터 이메일, 성, 이름, userName, 패스워드를 TextInput으로 받아서 Auth.signUp 메소드의 매개변수에 입력해 주면 됩니다.

Auth.signUp 메소드 구조는 인스타그램 클론코딩 웹과 동일합니다.

참조: [인스타그램 클론코딩] 웹 회원가입 구현

 

userName과 패스워드만 따로 입력하고 나머지는 attributes 속성에 넣어주면 됩니다.

Cognito 사용자 풀의 Pre-Signup 트리거 핸들러를 통과하면 Cognito와 데이터베이스에 사용자로 등록되면서 이메일로 인증코드가 전송됩니다.

참조: [인스타그램 클론코딩] Cognito Pre-SignUp 람다 함수

 

하지만 아직 이메일 인증을 하지 않았기 때문에 Cognito로 부터 토큰을 받을 수는 없습니다. 그래서 회원가입이 완료되면, navigation 객체를 사용해 Signup 스크린에서 Confirm 스크린으로 교체(replace)해 줍니다.

Confirm.js

회원가입과 관련 없는 코드 및 오류처리 코드는 제외했습니다.

 

[인스타그램 클론코딩] 앱 회원가입 구조 포스트에서 설명했지만 Confirm 스크린은 Signup 스크린과 동일한 스택 네비게이션에 존재하지만, Signup 스크린에서 Confirm 스크린으로 전환할 때는 스택에 쌓이지 않고 교체되는 스크린입니다.

 

코드는 간단합니다. Auth.confirmSignUp 메소드에 userName과 인증코드만 담아서 실행하면 됩니다.

그리고 Auth.resendSignUp 메소드와 UserName으로 인증코드를 재전송할 수 있습니다.

마지막으로 인증이 완료되면 Login 컴포넌트로 돌아가야 하는데, navigation.goBack 메소드를 사용하지 않고, navigation.navigate 메소드를 사용해서 돌아갑니다.

현재 스택 네비게이션에는 Login 스크린 위에 Confirm 스크린이 올라와 있는 상태인데요.

navigation.goBack 메소드는 매개변수를 전달할 수 없기 때문에, 뒤에 있는 Login 스크린에 userName과 패스워드를 전달할 방법이 좀 복잡해 지게 됩니다.

반면 navigation.navigate 메소드를 사용하면, 현재 스택 밑에 이동하려는 스택이 있을 때, 현재 스택을 지우고 이동하려는 스택(스크린)으로 이동합니다. 더하여 매개변수도 같이 전달할 수 있습니다.

참조: https://reactnavigation.org/docs/stack-actions/

Login.js

로그인 관련 부분은 다음 포스트에서 살펴보고 이번엔 Confirm 스크린에서 전달되는 매개값을 처리하는 방법에 대해서만 알아보겠습니다.

앱이 처음 시작할 때는 updateRequired, userName, password는 undefined일 것입니다. 하지만 Confirm 스크린에서 Login 스크린으로 이동됐을 때는 updateRequired, userName, password 변수가 값을 가지고 있을 것입니다.

이때 userNameInput과 passwordInput Hook의 값을 변경해 주면 됩니다.

왜 Hooks의 초기값으로 설정하지 않나요?

다음과 같이 말이죠.

navigation.navigate 메소드로 이동할 때는 이미 존재하는 스택이 있다면 그 스택(스크린)으로 이동하기 때문에, 이동된 스크린은 이미 랜더링이 한 번 이상됐습니다.

리액트에서 Hook의 초깃값을 설정하는 방법으로는 이미 랜더링된 컴포넌트의 랜더러를 트리거할 수 없기 때문에, 다음과 같이 코드를 따로 작성해 주어야 합니다.