3.4.3 props 객체의 구조 분해 할당과 타입 정의

지금까지 작성한 User 컴포넌트의 전체 코드는 다음과 같습니다.

src/components/User.tsx

export default function User(props: {
  userObj: { name: string; age: number; };
  clickHandler: () => void;
}) {
  return (
    <>
      <p>name: {props.userObj.name}</p>
      <p>age: {props.userObj.age}</p>
      <button onClick={props.clickHandler}>클릭</button>
    </>
  );
}

● 매개변수에서의 구조 분해 할당

props는 단일 객체이므로 부모 컴포넌트에서 속성을 몇십 개 지정해도 결국 하나의 props 객체로 전달됩니다. 이때 구조 분해 할당을 사용하면 객체의 속성을 더 간단하게 변수에 할당할 수 있습니다. 구조 분해 할당(destructuring assignment)은 객체나 배열의 속성을 추출해 변수에 할당하는 자바스크립트 문법입니다.