8.2.3 인풋에서 키보드 리턴 처리하기

인풋에서 Enter를 눌렀을 때 수행할 작업을 설정하겠습니다.

6장에서 ref를 통해 인풋에 포커스하는 방법을 배웠는데, 이번에는 조금 다릅니다. 여기서는 TextInput을 바로 사용하는 게 아니라 BorderedInput이라는 컴포넌트를 따로 만들었기 때문이죠. 특정 컴포넌트 내부에 있는 또 다른 컴포넌트에 ref를 설정하려면 forwardRef라는 함수를 사용해야 합니다.

BorderedInput을 다음과 같이 수정해주세요.

components/BorderedInput.js

import React from 'react';
import {StyleSheet, TextInput} from 'react-native';

function BorderedInput({hasMarginBottom, ...rest}, ref) {
  return (
    <TextInput
      style={[styles.input, hasMarginBottom && styles.margin]}
      ref={ref}
      {...rest}
    />
  );
}

(...)

export default React.forwardRef(BorderedInput);