코드에서 <User> 컴포넌트 내부에 작성한 <p> 요소 3개는 모두 User 컴포넌트에 children이라는 속성으로 전달됩니다. 리액트에서는 children이 텍스트, JSX 요소, 숫자, 배열 등 다양한 형태가 될 수 있기 때문에 이를 유연하게 처리할 수 있는 React.ReactNode 타입으로 지정합니다.

src/components/User.tsx

export default function User(props: { children: React.ReactNode }) {
  return <>{props.children}</>;

}

이처럼 props.children으로 전달받은 콘텐츠를 출력할 수 있습니다. 이때 구조 분해 할당을 사용하면 코드가 더 간결해집니다.

src/components/User.tsx

export default function User({ children }: { children: React.ReactNode }) {
  return <>{children}</>;

}

애플리케이션을 실행하면 <User> 컴포넌트 안에 작성한 <p> 요소들이 화면에 렌더링되는 것을 확인할 수 있습니다. 앞으로는 children을 사용할 때 구조 분해 할당 방식을 기본으로 사용합니다.