components/BorderedInput.js

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

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

(...)

이전에 ...object와 같은 문법이 spread 연산자 문법이라고 배웠지요? 그런데 BorderedInput 함수의 파라미터 객체에서 사용된 ...rest는 spread 연산자가 아니라 rest 연산자라고 부릅니다.

특정 객체나 배열에 사용하면 spread, 파라미터나 값을 선언하는 부분에서 사용하면 rest라고 부르는데, 다음 코드를 보면 이해하는 데 도움이 될 것입니다.

const object = { a: 1, b: 2, c: 3 };
const { a, ...rest } = object;
console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }