Firebase에서 제공하는 함수들을 컴포넌트에 바로 사용하지 않고 임의의 함수를 따로 만들어 호출해줄 건데요. 이 방식을 권장하는 이유는 이렇게 함수를 감싸는 작업을 한 번 하면 추후 firebase를 사용하지 않고 다른 방식으로 인증할 경우에도 코드를 쉽게 전환할 수 있기 때문입니다.

앞의 함수가 모두 준비됐으면 SignInScreen에서 사용해봅시다.

screens/SignInScreen.js

import React, {useState} from 'react';
import {
  Alert,
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import SignButtons from '../components/SignButtons';
import SignInForm from '../components/SignForm';
import {signIn, signUp} from '../lib/auth';

function SignInScreen({navigation, route}) {
  const {isSignUp} = route.params || {};
  const [form, setForm] = useState({
    email: '',
    password: '',
    confirmPassword: '',
  });
  const [loading, setLoading] = useState();

  const createChangeTextHandler = (name) => (value) => {
    setForm({...form, [name]: value});
};

  const onSubmit = async () => {
    Keyboard.dismiss();
    const {email, password} = form;
    const info = {email, password};
    setLoading(true);
    try {
      const {user} = isSignUp ? await signUp(info) : await signIn(info);
      console.log(user);
    } catch (e) {
      Alert.alert('실패');
      console.log(e);
    } finally {
      setLoading(false);
    }
  };

(...)

  <SignButtons
    isSignUp={isSignUp}
    onSubmit={onSubmit}
    loading={loading}
  />

(...)

onSubmit에서 isSignUp 값에 따라 signUp 또는 signIn 함수를 호출하도록 해줬습니다. 이 함수들은 Promise를 반환하므로 async/await 문법을 사용해 작업이 끝날 때까지 기다렸다가 특정 작업을 수행할 수 있습니다. 이 함수가 처음 호출될 때는 loading 상태를 true로 만들고, 작업이 끝나면 loading 상태를 false로 만듭니다.

작업이 실패할 수 있는 상황은 다양한데요. 이에 대한 대처는 나중에 해주겠습니다.