이렇게 ref를 생성해 TextInput의 Props로 지정해주면 원하는 컴포넌트의 레퍼런스를 선택할 수 있습니다. TextInput의 레퍼런스에는 다음과 같은 메서드가 구현되어 있습니다.

    .focus(): TextInput에 포커스를 잡아줍니다.

    .blur(): TextInput에 포커스를 해제합니다.

    .clear(): TextInput의 내용을 모두 비웁니다.

    제목 TextInput에서 onSubmitEditing Props를 통해 Enter를 눌렀을 때 내용 TextInput으로 포커스해보겠습니다.

    components/WriteEditor.js

    import React, {useRef} from 'react';
    import {View, StyleSheet, TextInput} from 'react-native';
    
    function WriteEditor({title, body, onChangeTitle, onChangeBody}) {
      const bodyRef = useRef()
    
      return (
        <View style={styles.block}>
          <TextInput
            placeholder="제목을 입력하세요"
            style={styles.titleInput}
            returnKeyType="next"
            onChangeText={onChangeTitle}
            value={title}
            onSubmitEditing={() => {
              bodyRef.current.focus()
            }}
          />
          (...)

    useRef로 선택한 레퍼런스는 .current 값을 조회해 확인할 수 있습니다.

    이제 제목을 입력하고 Enter를 눌러보세요. 내용으로 포커스가 이동했나요? (참고로 안드로이드에서 한글을 입력하는 중에 Enter를 누르면 스페이스가 먼저 들어가고, 그다음에 Enter를 한 번 더 눌러야 내용으로 포커스가 이동할 것입니다.)

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