(React-Native) Project: 로그인 기능(부적절한 input 값 알려주기)

내가 만드는 앱은 사용자의 개인 기록을 저장하는 기능이 있다.

이를 위해서 로그인 기능을 만들려고 한다.

 

SignInPage.js에서 'Email SignIn' 버튼을 누르면 'doSignIn' 함수가 실행된다.

 

          <Button full style={styles.emailSignIn} onPress={doSignIn}>
            <Text>Email SignIn</Text>
          </Button>

아래는 'doSignIn' 함수이다.

Input 부분이 비어있으면 비어있다고 알려주는 기능을 넣었다.

  const doSignIn = () => {
    console.log(email);
    console.log(password);

    if (email == '') {
      setEmailError('Email is required');
    } else {
      setEmailError('');
    }

    if (password == '') {
      setPasswordError('Password is required');
    } else {
      setPasswordError('');
    }
  };

useState로 상태를 관리한다. emailError 변수에 변한 값을 저장해 놓는다.

  const [emailError, setEmailError] = useState('');
  const [passwordError, setPasswordError] = useState('');

emailError에 저장된 값이 UI에 보여진다.

<Text>{emailError}</Text>