[TypeScript] 리액트 children 타입 지정해주기 - 타입별 특징

Children Props?

리액트 모든 컴포넌트에서 children props를 사용할 수 있습니다.
children props란 컴포넌트의 여는 태그와 닫는 태그 사이의 내용입니다.
예를 들면,

function App() {
  return <Welcome>Hello world!</Welcome>
}

이 태그에서 Hello world! 문자열이 Welcome 컴포넌트의 children props로 전달이 되어 접근할 수 있습니다.

function Welcome(props) {
  return <p>{props.children}</p>;
}

Children Props Type

타입스크립트에서는 Children Props를 전달을 할 때 타입을 지정을 해주어야 합니다.
그렇다면 어떤 타입으로 지정을 해주어야 하는지 알아보겠습니다.

1. JSX.Element

JSX.Element은 React Element를 상속받는 인터페이스로 가장 제한적인 유형입니다.
그렇기 때문에 문자열과 같은 Primitive타입의 데이터는 따로 전달이 불가능 합니다.

 

2. React.ReactChild

React.ReactChild는 React 18부터 사용을 지양하는 타입입니다.
React.ReactChild는 JSX.Element와 string과 number가 포함이 되어있습니다.
따라서 그 외의 배열과 같은 타입의 데이터는 불가능 합니다.

 

 

그렇다면 ReactChild | ReactChild[]같은 형태로 사용을 하면 배열이 가능하냐?
단일 배열은 가능하지만, 배열과 다른 요소가 섞이는 것은 불가능 합니다.

 

3. React.PropsWithChildren

type PropsWithChildren<P = unknown> = P & {
    children?: ReactNode | undefined;
}

PropsWithChildren 타입은 위와 같이 옵셔널한 타입입니다.
만일 children이 필수가 되는 컴포넌트에 경우에는 적합하지 않을 수 있습니다.

4. React.ReactNode

React.ReactNode는 가장 광범위하게 사용이 가능한 타입입니다.
String, Number, boolean, Null, Undefined등의 Primitives, 원시타입과
React Elements, React Fragments 등등 모든것을 받아들입니다.

참고

리액트 공식문서 - props.children
[React] React 컴포넌트(children) 타이핑하기
React children with typescript. 리액트 children 컴포넌트 타이핑
ReactNode, ReactChild, ReactElement 타입 비교