8.2.2 인풋 상태 관리하기

사용자가 인풋에 입력하는 정보를 상태로 관리해보겠습니다. useState Hook을 사용할 건데 이메일, 비밀번호, 비밀번호 확인 인풋을 위해 세 개의 useState를 사용하는 것이 아니라, 하나의 useState를 사용해 객체 형태의 상태를 사용하겠습니다. iOS에서는 인풋에 포커스가 잡혀서 키보드가 나타나면 화면을 가리게 될 텐데, 모든 UI가 정상적으로 보이도록 KeyboardAvoidingView를 사용하겠습니다.

screens/SignInScreen.js

import React, {useState} from 'react';
import {
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import BorderedInput from '../components/BorderedInput';
import CustomButton from '../components/CustomButton';

function SignInScreen({navigation, route}) {
  const {isSignUp} = route.params || {};
  const [form, setForm] = useState({
    email: '',
    password: '',
    confirmPassword: '',
  });
  const createChangeTextHandler = (name) => (value) => {
    setForm({...form, [name]: value});
  };
  const onSubmit = () => {
    Keyboard.dismiss();
    console.log(form);
  };

  return (
    <KeyboardAvoidingView
      style={styles.keyboardAvoidingView}
      behavior={Platform.select({ios: 'padding'})}>
        <SafeAreaView style={styles.fullscreen}>
          <Text style={styles.text}>PublicGallery</Text>
          <View style={styles.form}>
            <BorderedInput
              hasMarginBottom
              placeholder="이메일"
              value={form.email}
              onChangeText={createChangeTextHandler('email')}
            />
            <BorderedInput
              placeholder="비밀번호"
              hasMarginBottom={isSignUp}
              value={form.password}
              onChangeText={createChangeTextHandler('password')}
            />
            {isSignUp && (
              <BorderedInput
                placeholder="비밀번호 확인"
                value={form.confirmPassword}
                onChangeText={createChangeTextHandler('confirmPassword')}
              />
            )}
            <View style={styles.buttons}>
              {isSignUp ? (
                <>
                  <CustomButton
                    title="회원가입"
                    hasMarginBottom
                    onPress={onSubmit}
                  />
                  <CustomButton
                    title="로그인"
                    theme="secondary"
                    onPress={() => {
                      navigation.goBack();
                    }}
                  />
                </>
              ) : (
                <>
                  <CustomButton
                    title="로그인"
                    hasMarginBottom
                    onPress={onSubmit}
                  />
                  <CustomButton
                    title="회원가입"
                    theme="secondary"
                    onPress={() => {
                      navigation.push('SignIn',{isSignUp: true});
                    }}
                  />
                </>
              )}
            </View>
          </View>
        </SafeAreaView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  keyboardAvoidingView: {
    flex: 1,
  },

(...)