6.3.3 useRef로 컴포넌트 레퍼런스 선택하기

useRef는 함수 컴포넌트에서 컴포넌트의 레퍼런스를 선택할 수 있게 하는 Hook입니다. 제목을 입력하고 Enter를 누르면 하단 내용으로 포커스를 이동시키고 싶다고 합시다. 이럴 때는 내용 TextInput의 레퍼런스를 선택해서 포커스해줘야 합니다.

먼저 내용 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}
      />
      <TextInput
        placeholder="당신의 오늘을 기록해보세요"
        style={styles.bodyInput}
        multiline
        textAlignVertical="top"
        onChangeText={onChangeBody}
        value={body}
        ref={bodyRef}
      />
    </View>
  );
}

(...)