forwardRef를 사용하면 함수 컴포넌트의 두 번째 파라미터에서 ref를 받아와 사용할 수 있습니다. 파라미터로 받아온 ref를 이렇게 TextInput에 설정해주면, 추후에 다른 컴포넌트에서BorderedInput를 사용할 때 BorderedInputref를 달면 내부의 TextInputref가 달리게 된답니다. 그래서 TextInput에 바로 접근할 수 있게 되죠.

    forwardRef는 앞에서와 같이 내보내는 부분에서 사용해도 되고, 다음과 같이 컴포넌트를 선언하는 단계에서 사용해도 됩니다.

    const BorderedInput = React.forwardRef(({hasMarginBottom, ...rest}, ref) => {
      return (...)
    });

    이제 각 인풋에 returnKeyType을 지정하고, onSubmitEditing Props도 설정해 Enter를 눌렀을 때 호출할 함수를 설정해주세요.

    screens/SignInScreen.js

    import React, {useRef, 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 passwordRef = useRef();
      const confirmPasswordRef = useRef();
    
      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')}
                autoCapitalize="none"
                autoCorrect={false}
                autoCompleteType="email"
                keyboardType="email-address"
                returnKeyType="next"
                onSubmitEditing={() => passwordRef.current.focus()}
              />
              <BorderedInput
                placeholder="비밀번호"
                secureTextEntry
                hasMarginBottom={isSignUp}
                value={form.password}
                onChangeText={createChangeTextHandler('password')}
                ref={passwordRef}
                returnKeyType={isSignUp ? 'next' : 'done'}
                onSubmitEditing={() => {
                  if (isSignUp) {
                    confirmPasswordRef.current.focus();
                  } else {
                    onSubmit();
                  }
                }}
              />
              {isSignUp && (
                <BorderedInput
                  placeholder="비밀번호 확인"
                  secureTextEntry
                  value={form.confirmPassword}
                  onChangeText={createChangeTextHandler('confirmPassword')}
                  ref={confirmPasswordRef}
                  returnKeyType="done"
                  onSubmitEditing={onSubmit}
                />
              )}
    (...)

    인풋을 입력하고 Enter를 눌렀을 때 다른 인풋으로 포커스가 잘 되는지, 최하단의 인풋에서 Enter를 눌렀을 때 onSubmit이 잘 호출되는지 확인해보세요.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.