이제 위의 Hook을 AuthForm에서 사용해봅시다.

components/AuthForm.tsx

import {
  View,
  StyleSheet,
  Pressable,
  Platform,
  Text,
  TextInput,
  KeyboardAvoidingView,
  ActivityIndicator,
} from 'react-native';
import useLogin from '../hooks/useLogin';
import useRegister from '../hooks/useRegister';

export interface AuthFormProps {
  isRegister?: boolean;
}

function AuthForm({isRegister}: AuthFormProps) {
  (...)

  const {mutate: login, isLoading: loginLoading} = useLogin();
  const {mutate: register, isLoading: registerLoading} = useRegister();

  const isLoading = loginLoading || registerLoading;
  const onPress = () => {
    if (isLoading) {
      return;
    }

    if (isRegister) {
      register({
        email,
        username,
        password,
      });
    } else {
      login({
        identifier,
        password,
      });
    }
  };

  return (
    <KeyboardAvoidingView
      style={styles.block}
      behavior={Platform.select({ios: 'padding'})}>
      <View>
        (...)
        <Pressable
          style={({pressed}) => [
            styles.submit,
            Platform.OS === 'ios' && pressed && styles.submitPressed,
          ]}
          android_ripple={{color: '#42a5f5'}}
          onPress={onPress}>
          {isLoading ? (
            <ActivityIndicator size="small" color="white" />
          ) : (
            <Text style={styles.submitText}>
              {isRegister ? '회원가입' : '로그인'}
            </Text>
          )}
        </Pressable>
      </View>
      </View>
    </KeyboardAvoidingView>
  );
}

(...)