8.2.1.3 라우트 파라미터로 회원가입 화면 만들기

이제 회원가입 화면을 만들 차례인데요. 화면 컴포넌트를 새로 만드는 것이 아니라 화면의 라우트 파라미터를 사용해 isSignUp이라는 값이 true일 때 회원가입 화면을 띄워주는 기능을 구현해보겠습니다. 회원가입 화면에서는 비밀번호 확인 인풋이 하나 더 나타나고, 로그인과 회원가입 버튼의 위치가 변경됩니다.

SignInScreen의 Props를 통해 navigation과 route를 받아오고, 만약 isSignUp 파라미터 값이 true일 때 다른 UI를 보여주도록 설정하세요. 다음으로 로그인 화면의 회원가입 버튼을 눌렀을 때 파라미터와 함께 새로운 SignInScreen을 띄우고, 회원가입의 로그인 버튼을 눌렀을 때 이전 화면으로 돌아가도록 구현해보세요.

screens/SignInScreen.js

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import BorderedInput from '../components/BorderedInput';
import CustomButton from '../components/CustomButton';

function SignInScreen({navigation, route}) {
  const {isSignUp} = route.params ?? {};
  return (
    <SafeAreaView style={styles.fullscreen}>
      <Text style={styles.text}>PublicGallery</Text>
      <View style={styles.form}>
        <BorderedInput hasMarginBottom placeholder="이메일" />
        <BorderedInput placeholder="비밀번호" hasMarginBottom={isSignUp} />
        {isSignUp && <BorderedInput placeholder="비밀번호 확인" />}
        <View style={styles.buttons}>
          {isSignUp ? (
            <>
              <CustomButton title="회원가입" hasMarginBottom />
              <CustomButton
                title="로그인"
                theme="secondary"
                onPress={() => {
                  navigation.goBack();
                }}
              />
            </>
          ) : (
            <>
              <CustomButton title="로그인" hasMarginBottom />
              <CustomButton
                title="회원가입"
                theme="secondary"
                onPress={() => {
                  navigation.push('SignIn', {isSignUp: true});
                }}
              />
            </>
          )}
        </View>
      </View>
    </SafeAreaView>
  );
}

(...)