[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