[TypeScript] 객체타입 프롭스(props)란?

객체타입 프롭스(props)란?

컴포넌트가 전달받는 데이터가 객체 형태일 때의 프롭스를 의미

Q. 객체 타입 프롭스를 사용하는 이유는?
A. 여러 속성을 한 번에 전달하고 그 속성들을 개별적으로 사용할 수 있다는 장점이 있음. 특히 복잡한 데이터를 처리할 때 객체를 사용하여 여러 값을 하나의 프롭스로 전달하는 방식이 유용함.

interface UserProps {
  name: string;
  age: number;
}

function UserInfo(props: UserProps) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

• UserProps는 name과 age라는 두 가지 속성을 포함하는 객체 타입의 프롭스.
• UserInfo 컴포넌트는name과 age객체를 전달받아 내부에서 props.name과props.age 로 해당 값을 사용할 수 있음.

---

➕ 구조 분해 할당 가능

function UserInfo({ name, age }: UserProps) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

• 구조 분해 할당을 사용하면 props 객체에서 name과 age라는 속성을 바로 꺼내서 사용할 수 있음.
  (원래는 props.name, props.age와 같이 사용)