React - props를 객체로 받아서 편하게 사용하기

(제목을 뭐라고 해야 할 지 잘 모르겠다.) 부모 컴포넌트에서 자식 컴포넌트에 props를 넘겼을 때 자식 컴포넌트에서 JSX요소에 하나 하나 적기에는 너무 많을 때 사용하면 좋은 방법 같다!

// 부모 컴포넌트
<Input
  input={{
    id: "amount",
    type: "number",
    min: "1",
    max: "5",
    step: "1",
    defaultValue: "1"
  }}
/>;

// 자식 컴포넌트
const Input = (props) => {
  return <input {...props.input} />;
};

• 부모 컴포넌트에서 props를 객체로 보낸다.
• 자식 컴포넌트는 spread 연산자를 사용한다. (위의 코드는 아래 코드와 같다.)

<input id="amount" type="number" min="1" max="5" step="1" defaultValue="1" />

---

출처) Udemy - React 완벽 가이드 with Redux, Next.js, TypeScript

---