3.4.2 props 객체 타입 알아내기

리액트에서는 컴포넌트로 전달할 데이터 개수에 제한이 없습니다. 즉, 개발자가 원한다면 10개든 100개든 얼마든지 데이터를 전달할 수 있습니다. 앞의 예제에서는 name과 age를 각각의 속성으로 따로 전달했습니다. 이처럼 각 데이터를 개별 props로 지정할 수도 있지만, 전달할 데이터가 많아질수록 props를 하나하나 지정하면 코드가 길어지고 복잡해질 수 있습니다.

이럴 땐 전달할 데이터를 하나의 객체나 배열로 묶어 한 번에 전달하는 것이 더 깔끔하고 효율적입니다. 기존 코드를 객체를 사용해 전달하는 방법으로 바꿔 봅시다.

src/App.tsx

import User from './components/User';

export default function App() {

  const userObj = { ----- ➊
    name: '철수',
    age: 20,
  };
  return <User userObj={userObj} />; ----- ➋

}