[React.ts] PropsWithChildren

PropsWithChildren

들어가며

• 리액트(React.ts)에서 사용할 수 있는 @PropsWithChildren@ 타입에 대해 정리해본다.
• 이 타입은 리액트와 타입스크립트를 함께 사용할 때 사용할 수 있다.

 

PropsWithChildren

개념

• 타입스크립트(TypeScript)에서 리액트 컴포넌트에 자식 요소(@children@)를 허용하고자 할 때 사용하는 유틸리티 타입
• 보통 컴포넌트에 전달되는 기본 @props@ 외에도 자식 요소를 포함할 수 있을 때 유용하게 사용된다.
• @PropsWithChildren@ 타입은 컴포넌트가 자식 요소를 가질 수 있도록 명시하며, @children@을 명시적으로 정의하지 않고도 사용할 수 있도록 해준다.

 

사용 예제

import { PropsWithChildren } from 'react';

const layout = ({ children }: PropsWithChildren) => {
  return <main>{children}</main>;
};

export default layout;

 

⇒ @PropsWithChildren@을 사용할 경우, @layout@의 인자를 다음과 같이 작성하지 않아도 된다.

const layout = ({ children }: { children: React.ReactNode }) => {
  return <main>{children}</main>;
};

 

참고 사이트

PropsWithChildren vs ReactNode in TypeScript