더북(TheBook)

src/components/User.tsx

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

전개 연산자를 사용하면 코드가 간결해지고 필요한 속성만 선택적으로 전달할 수 있어 편리합니다. 실무에서도 자주 사용하므로 잘 익혀두기 바랍니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.