User 컴포넌트를 구조 분해 할당을 사용하도록 바꾸면 다음과 같습니다. props 객체는 userObj 속성과 clickHandler 속성을 전달하므로 개별 변수로 분해하면 props.을 생략하고 더 깔끔하게 사용할 수 있습니다.

src/components/User.tsx

export default function User({ userObj, clickHandler }: { ----- ➊

  userObj: { name: string; age: number; };
  clickHandler: () => void;
}) {
  return (
    <>

      <p>name: {userObj.name}</p> ----- ➋
      <p>age: {userObj.age}</p>
      <button onClick={clickHandler}>클릭</button>

    </>
  );
}

➊ { userObj, clickHandler }는 props 객체에서 userObj와 clickHandler라는 두 속성을 꺼내는 구조 분해 할당 구문입니다.

➋ 구조 분해 할당으로 props를 받아오면 JSX에서 props.userObj.name 대신 userObj.name으로 간결하게 접근할 수 있습니다.