Component 재활용

로그인 및 회원가입 페이지

import React from 'react';
import { View, StyleSheet, } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

const SignInPage = ({ route, params }) => {
  const isPressedSignUp = route.params ?? {} // 병합연산자
  return (
    <SafeAreaView>
      <Text>Sign In</Text>
      <View>
        <Input placeholder='Email' />
    	<Input placeholder='password '/>
        {isPressedSignUp && <Input placeholder='verify your password' />}
        <View>
          {
              isPressedSignUp ? (
                <>
                  <Button title='SignUp' />
                  <Button 
                    title='Go Back to SignIn' 
                    onPress={() => navigation.goBack()}
                  />
                </>
              ) : (
                <>
                  <Button title='LogIn' />
                  <Button 
                    title='SignUp' 
                    onPress={() => navigation.push('SignIn', {isPressedSignUp : true})}
                  />
                </>
              )
            } 
        </View>
      </View>
    </SafeAreaView>
  )
}
export default SignInPage;

회원가입 버튼을 누름과 동시에 회원가입 페이지를 호출 및 params에 isPressedSignUp 값을 넘겨 주어

회원가입 페이지의 isPressedSignUp조건을 충족시켜 비밀번호 확인과 뒤로가기 버튼을 활성화 시켜 회원가입

페이지를 따로 만들 필요가 없이 재활용 할 수 있음.

route.params ?? {} 병합연산자 (??)를 활용해 route.params가 전달되지 않았다면, 비어있는 객체{}

를 구조분해 할당하여 에러를 발생 시키지 않는다.