리액트 네이티브 (28) 썸네일형 리스트형 [인스타그램 클론코딩] 앱 로그아웃 구현 인스타그램 클론코딩 웹과 동일합니다. 참조: [인스타그램 클론코딩] 웹 로그아웃 구현 로그아웃 버튼을 클릭했을 때 다음 코드만 실행시키면 됩니다. Auth.signOut(); 위 코드가 실행되면 토큰을 포함한 Async Storage에 저장된 모든 로그인 정보까지 함께 삭제됩니다. 그리고 로그아웃 이벤트는 App 컴포넌트의 Hub 객체가 수신해서 isLoggedIn Hook을 false로 변경합니다. 그럼 App 컴포넌트부터 다시 랜더링됩니다. 참조: [인스타그램 클론코딩] 앱 로그인 구조 로그아웃 버튼 이벤트 핸들러 const logOut = async () => { await Auth.signOut(); } [인스타그램 클론코딩] 앱 회원가입 구현 [인스타그램 클론코딩] 앱 회원가입 구조 포스트 내용을 바탕으로 실제 회원가입을 구현해 보겠습니다. AuthNavigation.js AuthNavigation은 (App 컴포넌트가 마운트될 때 Async Storage에서 사용자 정보를 가져오지 못해서) App 컴포넌트의 isLoggedIn 상태가 false일 때 라우팅되는 네비게이션 컴포넌트입니다. 참조: [인스타그램 클론코딩] 앱 로그인 구조 Login → Signup → Confirm 스크린 순서로 회원가입 및 사용자 인증까지 마무리되며, 회원가입은 했는데 인증을 안하고 나중에 로그인한 경우 Login 스크린에서 바로 Confirm 스크린으로 이동합니다. Signup.js 회원가입과 관련 없는 코드 및 오류처리 코드는 제외했습니다. 사용자로 부터 이.. [인스타그램 클론코딩] 앱 회원가입 구조 인스타그램 클론코딩 웹과 달리 앱은 로그인, 회원가입, 인증코드 확인 화면이 각각 스택 네비게이션의 스크린으로 구성되어 있습니다. 그래서 인스타그램 클론코딩 웹보다는 코드 보기가 더 편합니다. 키보드가 나타날 때 컴포넌트들을 위로 올리는 방법은 있지만 그것이 중요한 것은 아니기 때문에 구현하지는 않았습니다. 로그인, 회원가입, 인증코드 확인 화면을 각각의 스크린으로 분리한 이유는 무엇인가요? 웹처럼 한 개의 화면에서 플래그(action)를 사용해 3종류의 화면을 표시하는 경우, 안드로이드 앱에서는 뒤로가기 버튼 한 번에 앱이 종료될 수 있기 때문입니다. 예를 들어, 회원 가입중에 소셜 로그인으로 전환하기 위해 뒤로가기 버튼을 누른 경우, 앱이 종료됩니다. 이 경우엔 회원가입 화면에서 뒤로가기 버튼을 누르.. [인스타그램 클론코딩] 앱 로그인 구조 [인스타그램 클론코딩] 웹 로그인 구조 포스트와 달리 앱에서는 Context를 사용하지 않았습니다. 왜 Context를 사용하지 않았나요? googleLogin 함수는 구글 로그인 버튼을 클릭했을 때 실행되는 핸들러입니다. import { Auth } from 'aws-amplify'; const googleLogin = async () => { const user = await Auth.federatedSignIn({provider: 'Google'}); console.log(user) // undefined } 그런데 user 출력해 보면 undefined라고 나옵니다. 왜일 까요? 웹에서는 이런 현상이 발생하지 않았습니다. 그래서 Auth.federatedSignIn 후에 AuthContext의 i.. 이전 1 2 3 4 다음
