<TIL> 로그인, 회원가입 화면 구현 - Trello(4)

오늘은 로그인 , 회원가입 페이지를 구현하다가 새로 알게 된 것들에 대해 작성을 하겠습니다.

 

1.  에뮬레이터에서는 컴퓨터 로컬에서 돌리는 서버와 연결하려면 (127.0.0.1) IP주소말고 (10.0.2.2)로 변경해야 합니다.

 

처음에는 http://localhost:port로 연결을 시도 했지만 NetWork Error만 발생하고 서버에는 들어가지도 않는 상황이 발생하였습니다.

이러한 경우에는 IP 주소를 10.0.2.2 로 변경하여 http://10.0.2.2:port로 연결하면 작동이 됩니다.

 

관려 stackover flow : https://stackoverflow.com/questions/5528850/how-do-you-connect-localhost-in-the-android-emulator

How do you connect localhost in the Android emulator?

2. Stack router을 쓸 때 조심

로그인 페이지에서도 회원가입 페이지로 이동하는 버튼이 있고

회원가입 페이지에서는 회원가입이 성공하면 로그인 페이지로 바로 이동 할 수 있게 플로우를 구성하였습니다.

 

만약에 회원가입을 한 뒤에 성공하여 로그인 페이지로 이동하였다가 다시 회원가입 페이지로 이동을 하게 되면 State의 데이터가 로그인 페이지로 넘어가는 바로 전 state상태로 계속 머무르고 있다는 것을 알았습니다. 

그래서 state 의 successAlert이 계속 true로 있었고 그 값에 맞춰 계속 회원가입이 성공하였다는 경고창이 뜨여있는 err가 발생되었습니다.

 

import React, { Component } from 'react';
import {
  View, Text, StyleSheet, TouchableOpacity,
} from 'react-native';
import { Button } from 'react-native-elements';
import { Isao } from 'react-native-textinput-effects';
import Axios from 'axios';
import Alert from 'react-native-awesome-alerts';
import { server } from '../utils/server';

class Signup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: null,
      email: null,
      password: null,
      SuccessAlert: false,
      FailAlert: false,
    };
    this.signupPressButton = this.signupPressButton.bind(this);
  }


  signupPressButton() { 
  ...
  }

  render() {
    return (
      <View style={styles.total}>
        <View style={styles.AppName}>
          <Text style={{ fontSize: 50 }}>
            Hello!
          </Text>
        </View>
        <View style={styles.Inputs}>
          <Isao
                label="Name"
                style={{ width: 330, marginTop: 15 }}
                activeColor="#da7071"
                borderHeight={8}
                inputPadding={16}
                labelHeight={24}
                passiveColor="black"
                onChangeText={(text) => this.setState({ name: text })}
          />
          <Isao
                label="Email"
                activeColor="#da7071"
                borderHeight={8}
                style={{ width: 330 }}
                inputPadding={16}
                labelHeight={24}
                passiveColor="black"
                onChangeText={(text) => this.setState({ email: text })}
            />
            <Isao
                label="Password"
                style={{ width: 330, marginBottom: 20 }}
                activeColor="#da7071"
                borderHeight={8}
                inputPadding={16}
                labelHeight={24}
                passiveColor="black"
                onChangeText={(text) => this.setState({ password: text })}
            />
            <View style={{ flexDirection: 'row' }}>
            <Button
            title="회원가입"
            type="outline"
            buttonStyle={{ width: 90, height: 40 }}
            onPress={() => this.signupPressButton()} />
            <TouchableOpacity onPress={() => this.props.navigation.navigate('Login Screen')}>
              <Text>
                로그인 페이지
              </Text>
            </TouchableOpacity>
            </View>
        </View>
        <Alert
        show={this.state.SuccessAlert}
        title="회원가입 성공"
        message="성공적으로 회원가입 되었습니다."
        showConfirmButton
        confirmText="로그인 하러 가기"
        confirmButtonColor="blue"
        onConfirmPressed={() => this.props.navigation.navigate('Login Screen')} />
        <Alert
        show={this.state.FailAlert}
        title="회원가입 실패"
        message="회원가입을 실패하였습니다."
        confirmText="회원가입 다시 하기"
        onConfirmPressed={() => this.setState({
          FailAlert: false, email: null, password: null, name: null,
        })}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
 ...
});
export default Signup;

 

그래서 로그인하러 가는 버튼을 누르면 state도 변경해주고 로그인 페이지로 이동해주는 함수를 만들어 넣어주었습니다.

 

import React, { Component } from 'react';
import {
  View, Text, StyleSheet, TouchableOpacity,
} from 'react-native';
import { Button } from 'react-native-elements';
import { Isao } from 'react-native-textinput-effects';
import Axios from 'axios';
import Alert from 'react-native-awesome-alerts';
import { server } from '../utils/server';

class Signup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: null,
      email: null,
      password: null,
      SuccessAlert: false,
      FailAlert: false,
    };
    this.signupAfter = this.signupAfter.bind(this);
    this.signupPressButton = this.signupPressButton.bind(this);
  }

  signupAfter() {
    this.setState({
      SuccessAlert: false,
    });
    return this.props.navigation.navigate('Login Screen');
  }

  signupPressButton() {
    ...
  }

  render() {
    return (
      <View style={styles.total}>
        <View style={styles.AppName}>
          <Text style={{ fontSize: 50 }}>
            Hello!
          </Text>
        </View>
        <View style={styles.Inputs}>
          <Isao
                label="Name"
                style={{ width: 330, marginTop: 15 }}
                activeColor="#da7071"
                borderHeight={8}
                inputPadding={16}
                labelHeight={24}
                passiveColor="black"
                onChangeText={(text) => this.setState({ name: text })}
          />
          <Isao
                label="Email"
                activeColor="#da7071"
                borderHeight={8}
                style={{ width: 330 }}
                inputPadding={16}
                labelHeight={24}
                passiveColor="black"
                onChangeText={(text) => this.setState({ email: text })}
            />
            <Isao
                label="Password"
                style={{ width: 330, marginBottom: 20 }}
                activeColor="#da7071"
                borderHeight={8}
                inputPadding={16}
                labelHeight={24}
                passiveColor="black"
                onChangeText={(text) => this.setState({ password: text })}
            />
            <View style={{ flexDirection: 'row' }}>
            <Button
            title="회원가입"
            type="outline"
            buttonStyle={{ width: 90, height: 40 }}
            onPress={() => this.signupPressButton()} />
            <TouchableOpacity onPress={() => this.props.navigation.navigate('Login Screen')}>
              <Text>
                로그인 페이지
              </Text>
            </TouchableOpacity>
            </View>
        </View>
        <Alert
        show={this.state.SuccessAlert}
        title="회원가입 성공"
        message="성공적으로 회원가입 되었습니다."
        showConfirmButton
        confirmText="로그인 하러 가기"
        confirmButtonColor="blue"
        onConfirmPressed={() => this.signupAfter()} />
        <Alert
        show={this.state.FailAlert}
        title="회원가입 실패"
        message="회원가입을 실패하였습니다."
        confirmText="회원가입 다시 하기"
        onConfirmPressed={() => this.setState({
          FailAlert: false, email: null, password: null, name: null,
        })}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  ...
});
export default Signup;