더북(TheBook)

이렇게 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를 한 번 더 눌러야 내용으로 포커스가 이동할 것입니다.)

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