[React Native] 로그인 화면 구현 (프론트엔드) - 5. 로그인/등록 버튼 이벤트 생성

 

 

---

 

---

 

 

---

1. 로그인/등록 버튼 이벤트 생성

 

로그인의 버튼 만들기 전 선행되어야 하는 게 로그인 검증 validation이다.

로그인 검증 프로세스를 위한 파일을 하나 만들 건데 /app/utils/forms 에 validationRules.js 를 만들자. 이 파일에서 검증 항목과 검증 방법을 구현할 것이다. 파일의 반환은 true or false 인데 문제가 없다면 true, 하나라도 문제가 있다면 false가 반환될 것이다.

그리고 authForm.js에서는 반환된 값을 이용해 버튼을 동작시킬지 오류를 발생시킬지 구현할 것이다.

 

현재 백엔드와 연결되어 있지 않아 로컬에서 확인할 건데 이건 디비거를 활용하자.

 

로그인 화면, 회원가입 화면 따라서 접근 개체가 달라진다. 로그인은 email, password만 다루고 회원가입은 다 다뤄야 한다. 이건 if else 문을 활용하자.

 

유효하지 않은 경우도 if else 문을 활용하자. 

// /app/components/auth/authForm.js
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import {useNavigation} from '@react-navigation/native';
import React, {useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  Platform,
} from 'react-native';
import Input from '../../utils/forms/input';
import validationRules from '../../utils/forms/validationRules';

const AuthForm = ({goWithoutLogin}) => {
  const [type, setType] = useState('로그인'); // 로그인 / 등록
  const [action, setAction] = useState('로그인'); // 로그인 / 등록
  const [actionMode, setActionMode] = useState('회원가입'); // 회원가입 / 로그인 화면으로
  const [hasErrors, setHasErrors] = useState(false);
  const [form, setForm] = useState({
    email: {
      value: '',
      type: 'textInput',
      rules: {
        isRequired: true,
        isEmail: true,
      },
      valid: false,
    },
    password: {
      value: '',
      type: 'textInput',
      rules: {
        isRequired: true,
        minLength: 6,
      },
      valid: false,
    },
    confirmPassword: {
      value: '',
      type: 'textInput',
      rules: {
        confirmPassword: 'password',
      },
      valid: false,
    },
  });

  //   state = {
  //     type: 'Login',
  //     action: 'Login',
  //     actionMode: '새로 등록할게요~',
  //     hasErrors: false,
  //     form: {
  //       email: {
  //         value: '',
  //         type: 'textInputRevised',
  //         rules: {},
  //         valid: false,
  //       },
  //       password: {
  //         value: '',
  //         type: 'textInput',
  //         rules: {},
  //         valid: false,
  //       },
  //       confirmPassword: {
  //         value: '',
  //         type: 'textInput',
  //         rules: {},
  //         valid: false,
  //       },
  //     },
  //   };
  updateInput = (name, value) => {
    setHasErrors(false);
    let formCopy = form;
    formCopy[name].value = value;
    let rules = formCopy[name].rules;
    let valid = validationRules(value, rules, formCopy);
    formCopy[name].valid = valid;
    setForm(form => {
      return {...formCopy};
    });
    // setForm({
    //   form: formCopy,
    // });
    // console.warn(form);
  };
  confirmPassword = () => {
    return type != '로그인' ? (
      <Input
        value={form.confirmPassword.value}
        type={form.confirmPassword.type}
        secureTextEntry={true}
        placeholder="비밀번호 재입력"
        placeholderTextColor={'#ddd'}
        onChangeText={value => updateInput('confirmPassword', value)}
      />
    ) : null;
  };
  formHasErrors = () => {
    return hasErrors ? (
      <View style={styles.errorContainer}>
        <Text style={styles.errorLabel}>
          앗! 로그인 정보를 다시 확인해주세요~
        </Text>
      </View>
    ) : null;
  };

  changeForm = () => {
    type === '로그인'
      ? (setType('등록'), setAction('등록'), setActionMode('로그인 화면으로'))
      : (setType('로그인'), setAction('로그인'), setActionMode('회원가입'));
  };

  submitUser = () => {
    //Init.
    let isFormValid = true;
    let submittedForm = {};
    const formCopy = form;

    for (let key in formCopy) {
      if (type === '로그인') {
        if (key !== 'confirmPassword') {
          isFormValid = isFormValid && formCopy[key].valid;
          submittedForm[key] = formCopy[key].value;
        }
      } else {
        isFormValid = isFormValid && formCopy[key].valid;
        submittedForm[key] = formCopy[key].value;
      }
    }

    if (isFormValid) {
      if (type === '로그인') {
        console.log('로그인: ');
        for (let key in submittedForm) {
          console.log(submittedForm[key]);
        }
      } else {
        console.log('회원가입: ');
        for (let key in submittedForm) {
          console.log(submittedForm[key]);
        }
      }
    } else {
      setHasErrors(true);
    }
  };
  return (
    <View>
      <Input
        value={form.email.value}
        type={form.email.type}
        autoCapitalize={'none'}
        keyboardType={'email-address'}
        placeholder="이메일 주소"
        placeholderTextColor={'#ddd'}
        onChangeText={value => updateInput('email', value)}
      />
      <Input
        value={form.password.value}
        type={form.password.type}
        secureTextEntry={true}
        placeholder="비밀번호"
        placeholderTextColor={'#ddd'}
        onChangeText={value => updateInput('password', value)}
      />

      {confirmPassword()}
      {formHasErrors()}
      <View style={{marginTop: 40}}>
        <View style={styles.button}>
          <Button title={action} color="#48567" onPress={submitUser} />
        </View>
        <View style={styles.button}>
          <Button title={actionMode} color="#48567" onPress={changeForm} />
        </View>
        <View style={styles.button}>
          <Button
            title="비회원 로그인"
            color="#48567"
            onPress={() => goWithoutLogin()}
          />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  errorContainer: {
    marginBottom: 10,
    marginTop: 30,
    padding: 20,
    backgroundColor: '#ee3344',
  },
  errorLabel: {
    color: '#fff',
    fontSize: 15,
    fontWeight: 'bold',
    textAlignVertical: 'center',
    textAlign: 'center',
  },
  button: {
    ...Platform.select({
      ios: {
        marginTop: 15,
      },
      android: {
        marginTop: 15,
        marginBottom: 10,
      },
    }),
  },
});

export default AuthForm;

 

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EC%A4%91%EA%B8%89/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Intermediate - 인프런 | 강의