더북(TheBook)

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이 잘 호출되는지 확인해보세요.

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