userObj 객체의 속성(name, age)까지 한 번에 구조 분해 할당하면 userObj도 생략되어 코드가 더 간결해집니다.
src/components/User.tsx
export default function User({ userObj: { name, age }, clickHandler }: { ----- ➊
userObj: { name: string; age: number; };
clickHandler: () => void;
}) {
return (
<>
<p>name: {name}</p> ----- ➋
<p>age: {age}</p>
<button onClick={clickHandler}>클릭</button>
</>
);
}
➊ userObj 객체를 다시 구조 분해 할당해서 name과 age 값을 꺼냅니다.
➋ 구조 분해 할당은 매개변수에서 바로 처리되므로 userObj.name, userObj.age 대신 name, age만 사용하면 됩니다.