8.2.1.1 rest 연산자와 spread 연산자로 모든 Props 그대로 넘겨주기

이제 BorderedInput에 onChangeText, placeholder, value Props를 설정해줘야 하는데요. 이 Props를 설정하는 방법은 다음과 같습니다.

components/BorderedInput.js

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

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

(...)

이 코드를 보면 세 가지 Props에 대해 컴포넌트에서 전달받은 Props를 그대로 TextInput에 넣어주고 있지요? 이러한 상황에 사용하면 유용한 팁이 한 가지 있습니다. 함수의 파라미터 부분에서는 ...rest를 사용해 지정한 키 외의 Props를 rest 객체에 담습니다. 그리고 TextInput 컴포넌트의 Props를 지정하는 JSX 부분에서 {...rest}를 사용해 rest 객체의 모든 키와 값을 TextInput의 Props로 설정하는 것입니다.