[React Native] 로그인 화면 구현 (프론트엔드) - 3. 로그인, 회원가입 화면 버튼 및 이벤트 생성

 

 

---

 

---

 

 

---

1. 로그인 화면 버튼 및 이벤트 생성

선행되어야 할 사전 작업이 있다. 루트 디렉토리에 있는 routes.js를 보면 isLoggedIn 이 true인지 false인지에 따라 화면이 다르게 보인다. 그런데 로그인이 안 된 상태에서도 다이어리와 뉴스탭이 있는 메인 화면을 보여주고자 한다. 이건 비회원인 상태에서도 메인화면을 보여주기 위함인데 다이어리 기능은 제한을 두고 뉴스탭만 보여주고자 한다. 그래서 isLoggedIn 이 false일 때 리턴되는 부분에도 메인화면이 보이도록 작업하자.

 

버튼을 눌러도 아무런 반응을 하지 않는데 이건 onPress를 이용한 이벤트를 발생시키지 않아서이다. 비회원 버튼을 눌렀을 때 메인화면으로 이동할 수 있게끔 작업을 해보자.

구현한 게 화면에 잘 나오는 건 import 한 AuthForm이 렌더링 되고 있기 때문이다. index.js, authForm.js는 부모자식 관계이다. index.js가 부모, authForm.js가 자식이 될 것이다. 부모자식 간에는 props를 이용한 전달이 가능해서 이걸 이용해보자.

  

// /app/routes.js
import React, {Component} from 'react';

import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

//Screens
import SignIn from './components/auth';
import Diary from './components/diary';
import News from './components/news';

const AuthStack = createStackNavigator();
const MainScreenTab = createBottomTabNavigator();

/*
    Stack Navigator
        - Stack Screen A

    Stack Navigator
        - Tab Navigator
            - Tab Screen B
            - Tab Screen C

*/

const isLoggedIn = false;

const AppTabComponent = () => {
  return (
    <MainScreenTab.Navigator>
      <MainScreenTab.Screen name="Diary" component={Diary} />
      <MainScreenTab.Screen name="News" component={News} />
    </MainScreenTab.Navigator>
  );
};
export const RootNavigator = () => {
  return (
    <AuthStack.Navigator screenOptions={{headerShown: false}}>
      {isLoggedIn ? (
        <AuthStack.Screen name="Main" component={AppTabComponent} />
      ) : (
        <>
          <AuthStack.Screen name="SignIn" component={SignIn} />
          <AuthStack.Screen
            name="AppTabComponent"
            component={AppTabComponent}
          />
        </>
      )}
    </AuthStack.Navigator>
  );
};

 

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

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  ActivityIndicator,
  ScrollView,
} from 'react-native';
import AuthLogo from './authLogo';
import AuthForm from './authForm';
const AuthComponent = ({navigation}) => {
  state = {
    loading: false,
  };
  goWithoutLogin = () => {
    navigation.navigate('AppTabComponent');
  };

  if (this.state.loading) {
    return (
      <View style={styles.loading}>
        <ActivityIndicator />
      </View>
    );
  } else {
    return (
      <ScrollView style={styles.container}>
        <View>
          <AuthLogo />
          <AuthForm goWithoutLogin={goWithoutLogin} />
        </View>
      </ScrollView>
    );
  }
};

const styles = StyleSheet.create({
  loading: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  container: {
    flex: 1,
    backgroundColor: '#7487C5',
    paddingTop: 130,
    paddingLeft: 50,
    paddingRight: 50,
  },
});

export default AuthComponent;

 

// /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';
const AuthForm = ({goWithoutLogin}) => {
  const [type, setType] = useState('Login');
  const [action, setAction] = useState('Login');
  const [actionMode, setActionMode] = useState('새로 등록할게요~');
  const [hasErrors, setHasErrors] = useState(false);
  const [form, setForm] = useState({
    email: {
      value: '',
      type: 'textInput',
      rules: {},
      valid: false,
    },
    password: {
      value: '',
      type: 'textInput',
      rules: {},
      valid: false,
    },
    confirmPassword: {
      value: '',
      type: 'textInput',
      rules: {},
      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;
    setForm(form => {
      return {...formCopy};
    });
    // setForm({
    //   form: formCopy,
    // });
    console.warn(form);
  };
  confirmPassword = () => {
    return type != 'Login' ? (
      <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;
  };
  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" />
        </View>
        <View style={styles.button}>
          <Button title={actionMode} color="#48567" />
        </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;

위와 같이 코드를 작성하면 비회원 로그인 버튼을 눌렀을 때 AppTabComponents로 잘 연결이 된다!

---

2. 회원가입 버튼 이벤트 생성

2번째 버튼의 이벤트 핸들러를 추가하자. 비밀번호 재확인을 위한 textInput이 추가되는 부분이었고 state의 type값이 'Login'이 아닐 때 동작했다. 즉, state의 type 값에 따라 화면에 보여지는 형식을 바꿔주는 버튼이라고 생각하면 된다.

 

그래서 이 버튼의 이벤트 핸들러는 화면의 형식을 바꿔주는 함수를 호출하게 할 것이고 이 함수는 state의 type값을 바꿔주도록 하자.

 

// /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';
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: {},
      valid: false,
    },
    password: {
      value: '',
      type: 'textInput',
      rules: {},
      valid: false,
    },
    confirmPassword: {
      value: '',
      type: 'textInput',
      rules: {},
      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;
    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('로그인'));
  };
  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" />
        </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;

 

changeForm 함수를 보면 되는데 함수형으로 변경하면서 state 부분에서 차이가 있어 구조가 바뀌었다. 좀 더 코드가 심플하게 바뀐 느낌..?

---

참고 자료

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 - 인프런 | 강의