[2022-02-22 🐤 TIL ]

현재 인프런에서 강의를 들으면서 React-Native와 typescript를 공부하고 있습니다.

오늘은 로그인, 회원가입 페이지를 만들어보면서 Style과 TexInput을 사용하는 방법을 알아보았습니다.

RN - TextInput 공식문서
https://reactnative.dev/docs/textinput

import React, {useCallback, useState, useRef} from 'react';
import {
  View,
  Text,
  Pressable,
  StyleSheet,
  TextInput,
  Alert,
  KeyboardAvoidingView
} from 'react-native';
import {RootStackParamList} from '../../App';

function SignIn({navigation}: RootStackParamList) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const canGoNext = !!email && !!password;
  const emailRef = useRef<TextInput | null>(null);
  const passwordRef = useRef<TextInput | null>(null);

  const changeEmail = useCallback(text => {
    setEmail(text);
  }, []);

  const changePassword = useCallback(text => {
    setPassword(text);
  }, []);

  const onSubmit = useCallback(() => {
    if (canGoNext) {
      Alert.alert('Hi', 'Hello');
    } else {
      Alert.alert('no!', 'GoodBye');
    }
  }, [email, password]);

  const goToSignUp = useCallback(() => {
    navigation.navigate('SignUp');
  }, [navigation]);

  return (
    <KeyboardAvoidingView behaivor="padding">
      <View style={styles.inputZoone}>
        <View>
          <Text style={styles.label}>이메일</Text>
          <TextInput
            style={styles.textInput}
            value={email}
            autoFocus
            autoComplete={'email'}
            textContentType="emailAddress"
            importantForAutofill="yes"
            onChangeText={changeEmail}
            placeholder="이메일을 입력"
            blurOnSubmit={false}
            keyboardType="email-address"
            onSubmitEditing={() => {
              passwordRef.current?.focus();
            }}
            ref={emailRef}
          />
        </View>
        <View>
          <Text style={styles.label}>비밀번호</Text>
          <TextInput
            style={styles.textInput}
            value={password}
            secureTextEntry
            importantForAutofill="yes"
            onChangeText={changePassword}
            placeholder="비밀번호를 입력"
            ref={passwordRef}
            onSubmitEditing={() => {
              onSubmit();
            }}
          />
        </View>
      </View>
      <View style={styles.ButtonZone}>
        <Pressable style={styles.loginButton} onPress={onSubmit}>
          <Text style={styles.loginButtonFont}>로그안</Text>
        </Pressable>
        <Pressable style={styles.signupButton} onPress={goToSignUp}>
          <Text style={styles.loginButtonFont}>회원가입</Text>
        </Pressable>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  loginButton: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
    marginBottom: 10,
  },
  signupButton: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
  },
  loginButtonFont: {
    fontSize: 14,
    color: '#0ba2ba',
  },
  ButtonZone: {
    alignItems: 'center',
  },
  textInput: {
    marginHorizontal: 10,
    fontSize: 15,
    margin: 10,
    paddingVertical: 20,
  },
  label: {
    fontWeight: '600',
    color: 'black',
    fontSize: 17,
    marginHorizontal: 10,
  },
  inputZoone: {
    paddingHorizontal: 20,
    paddingTop: 40,
    paddingBottom: 20,
  },
});

export default SignIn;

로그인 화면

import React, {useCallback, useState, useRef} from 'react';
import {
  View,
  Text,
  Pressable,
  StyleSheet,
  TextInput,
  Alert,
  KeyboardAvoidingView,
} from 'react-native';
import {RootStackParamList} from '../../App';

function Signup({navigation}: RootStackParamList) {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  
  const canGoNext = !!email && !!password;
  
  const emailRef = useRef<TextInput | null>(null);
  const nameRef = useRef<TextInput | null>(null);
  const passwordRef = useRef<TextInput | null>(null);

  const changeEmail = useCallback(text => {
    setEmail(text);
  }, []);

  const changeName = useCallback(text => {
    setName(text);
  }, []);

  const changePassword = useCallback(text => {
    setPassword(text);
  }, []);

  const onSubmit = useCallback(() => {
    if (canGoNext) {
      Alert.alert('Hi', 'dsds');
    } else {
      Alert.alert('no!', 'dsds');
    }
  }, [email, password, name]);

  return (
    <KeyboardAvoidingView behavior="padding">
      <View style={styles.inputZoone}>
        <View>
          <Text style={styles.label}>이메일</Text>
          <TextInput
            style={styles.textInput}
            value={email}
            autoFocus
            autoComplete={'email'}
            textContentType="emailAddress"
            importantForAutofill="yes"
            onChangeText={changeEmail}
            placeholder="이메일을 입력"
            blurOnSubmit={false}
            keyboardType="email-address"
            onSubmitEditing={() => {
              nameRef.current?.focus();
            }}
            ref={emailRef}
          />
        </View>
        <View>
          <Text style={styles.label}>이름</Text>
          <TextInput
            style={styles.textInput}
            value={name}
            textContentType="emailAddress"
            importantForAutofill="yes"
            onChangeText={changeName}
            placeholder="이름을 입력"
            blurOnSubmit={false}
            onSubmitEditing={() => {
              passwordRef.current?.focus();
            }}
            ref={nameRef}
          />
        </View>
        <View>
          <Text style={styles.label}>비밀번호</Text>
          <TextInput
            style={styles.textInput}
            value={password}
            secureTextEntry
            importantForAutofill="yes"
            onChangeText={changePassword}
            placeholder="비밀번호를 입력"
            ref={passwordRef}
            onSubmitEditing={() => {
              onSubmit();
            }}
          />
        </View>
      </View>
      <View style={styles.ButtonZone}>
        <Pressable style={styles.signupButton} onPress={onSubmit}>
          <Text style={styles.loginButtonFont}>회원가입</Text>
        </Pressable>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  loginButton: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
    marginBottom: 10,
  },
  signupButton: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
  },
  loginButtonFont: {
    fontSize: 14,
    color: '#0ba2ba',
  },
  ButtonZone: {
    alignItems: 'center',
  },
  textInput: {
    marginHorizontal: 10,
    fontSize: 15,
    margin: 10,
    paddingVertical: 20,
  },
  label: {
    fontWeight: '600',
    color: 'black',
    fontSize: 17,
    marginHorizontal: 10,
  },
  inputZoone: {
    paddingHorizontal: 20,
    paddingTop: 40,
    paddingBottom: 20,
  },
});

export default Signup;

회원가입 페이지