이 코드에서는 rest 연산자가 사용됐습니다. rest라는 객체에는 a를 제외한 값들이 배열 안에 들어있습니다.

반면, 다음 코드는 rest가 아닌 spread 연산자를 사용한 예입니다.

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

rest 연산자는 배열에서도 사용할 수 있습니다.

const array = [1, 2, 3, 4, 5];
const [a, b, ...rest];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

추가로 BorderedInput에서 한 것처럼 JSX에서 spread 연산자를 사용하면 객체 안에 있는 키와 값을 Props로 지정해줍니다.

const object = { a: 1, b: 2};
const foo = <MyComponent a={object.a} b={object.b} />
const bar = <MyComponent {...object} />

이 코드에서 foo와 bar는 동일합니다.

결국 BorderedInput의 파라미터 부분에서는 rest 연산자를 사용하고, JSX 부분에서는 spread 연산자를 사용해 Props로 받아온 모든 키와 값을 TextInput 컴포넌트의 Props로 지정해준 것입니다. 이렇게 하면 TextInput에 설정하고 싶은 Props들을 컴포넌트의 파라미터 부분에서 하나하나 입력할 필요가 없겠죠.