React

React + TypeScript의 PropsWithChildren

FrontOverflow 2023. 3. 12. 14:20
반응형

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다.

이번 글에서는 TypeScript를 사용해서 리액트 개발을 할 때 유용한 PropsWithChildren 타입에 대해서 알아보도록 하겠습니다.

처음에 JavaScript로 리액트 개발을 하다가 TypeScript로 넘어오게 되면,

리액트의 다양한 타입들을 모르기 때문에 헤매는 경우가 많습니다.

그 중에서도 특히 굉장히 자주 사용되는 children의 타입을 어떻게 처리해야 하는지 모르는 경우가 많습니다.

 

그래서 가장 단순하게 드는 아이디어로 ReactElement 또는 JSX.Element라는 타입을 사용하여 children을 정의하고,

아래 예시 코드와 같이 사용하게 됩니다.

import { ReactElement } from 'react';

type HelloProps = {
  children: ReactElement;
};

function Hello(props: HelloProps) {
  return (
    <div>
      {props.children}
    </div>
  );
}

export default Hello;

 

물론 이렇게 사용해도 잘 작동합니다.

하지만 children을 매번 저렇게 컴포넌트의 props 타입에 직접 정의해서 사용하게 되면,

타입이 한 곳에서 일괄적으로 관리되지 않는다는 단점이 있습니다.

 

이러한 단점을 극복하기 위해서 아래와 같이 Children이라는 공통타입을 정의해놓고 사용할 수 있습니다.

import { ReactElement } from 'react';

type Children = {
  children: ReactElement;
}

type HelloProps = Children & {
  title: string;
};

function Hello(props: HelloProps) {
  const { title, children } = props;

  return (
    <div>
      <p>{title}</p>
      {children}
    </div>
  );
}

export default Hello;

 

이렇게 하다보면 자연스럽게 '리액트에서 이미 만들어 둔 children과 관련된 타입이 없을까?' 라는 생각이 들게 되겠죠.

그래서 children과 관련된 타입을 찾다보면 나오는 것이 바로 이번 글의 주제인 PropsWithChildren입니다.

 

PropsWithChildren타입은 말 그대로 children을 가진 props 타입을 의미합니다.

TypeScript로 개발된 리액트 컴포넌트에서 children을 명시적으로 사용하고 싶을 때 사용하는 타입이라고 보시면 됩니다.

PropsWithChildren은 아래와 같이 Generic과 함께 사용하면 됩니다.

import { PropsWithChildren } from 'react';

type HelloProps = PropsWithChildren<{
  title: string;
}>;

function Hello(props: HelloProps) {
  const { title, children } = props;

  return (
    <div>
      <p>{title}</p>
      {children}
    </div>
  );
}

export default Hello;

 

사실 아까 우리가 앞에서 만든 Children이라는 타입의 사용법과 거의 유사합니다.

TypeScript를 사용해서 리액트 개발을 하신다면,

이렇게 PropsWithChildren을 사용해서 children을 렌더링 해보시기 바랍니다.

감사합니다.

반응형