[React] PropsWithChildren 이해하기

PropsWithChildren

---

PropsWithChildren은 타입스크립트로 작성된 React 컴포넌트에서 자식 요소를 포함하는 props를 정의하는 데 사용되는 타입이다.

이를 사용하면 컴포넌트의 타입 안전성을 높이고, 코드 가독성을 향상시키며, 더 유연한 컴포넌트를 만들 수 있다.

리액트 17 버전까지는 children 속성을 FC 타입에 포함했지만 18 버전부터는 FC 타입에서 children 속성을 제거했다. 그리고 PropsWithChildren이라는 제네릭 타입을 새롭게 제공하여 children?: ReactNode 부분을 PropsWithChildren 타입으로 대체했다.

 

 

왜 PropsWithChildren을 사용할까?

React 컴포넌트는 일반적으로 props를 통해 데이터를 전달받는다. 하지만 때때로, 컴포넌트가 자식 요소들을 포함해야 하는 경우가 있다. 예를 들어, 다음과 같은 경우 ChildComponent는 태그를 자식 요소로 받는다. 이를 타입스크립트로 표현하려면 PropsWithChildren을 사용해야 한다.

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent>
        <p>This is a child element</p>
      </ChildComponent>
    </div>
  );
};

 

즉, PropsWithChildren 타입을 사용하면 Props타입에 반복해서 children 속성을 추가할 필요가 없어지므로 코드를 좀 더 깔끔하게 유지할 수 있다.

1. 타입 안전성: 타입스크립트를 사용하면 컴파일 타임에 타입 오류를 잡을 수 있다. PropsWithChildren을 사용하면 컴포넌트가 자식 요소를 제대로 받을 수 있도록 타입을 명확히 정의할 수 있다.
2. 코드 가독성: PropsWithChildren을 사용하면 컴포넌트의  인터페이스가 더 명확해지고, 자식 요소가 포함될 수 있음을 분명히 나타낼 수 있다.
3. 유연성: PropsWithChildren을 사용하면 다양한 자식 요소를 포함하는 컴포넌트를 쉽게 만들 수 있다. 이는 재사용 가능한 컴포넌트를 설계하는 데 매우 유용하다.

 

PropsWithChildren의 사용법

PropsWithChildren는 react 패키지에서 가져올 수 있으며, 제네릭 타입으로 컴포넌트의 props에 적용된다. 이는 props가 자식 요소를 포함하도록 확장한다.

import type { FC, PropsWithChildren } from 'react';

interface MyComponentProps {
  title: string;
}

const MyComponent: FC<PropsWithChildren<MyComponentProps>> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      <div>{children}</div>
    </div>
  );
};

export default MyComponent;

위의 예제에서, MyComponent는 title이라는 문자열 prop과 자식 요소를 받는다. PropsWithChildren를 사용함으로써, children이 자동으로 props에 포함된다.