React에서 Children을 JS와 TS에서 각각 사용하는 방법

말 그대로 children🧒을 이용해서 하위 컴포넌트를 전달해주는 코드를 짤때 TypeScript에선 어떠한 type을 쓰는 거지? 라는 궁금증이 생겨서 찾아본 결과에 대한 공유다...!!!

Childrend이란?

태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props이다.
즉, <App>{children}</App> App 컴포넌트 아래에 하위 컴포넌트로 데이터를 전달될 때 사용되어진다.

1) JavaScript에서 Children을 사용하는 방법

Wrapper.js

import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}

export default Wrapper;

2) TypeScript에서 Children을 사용하는 방법

Wrapper.js

import React from 'react';

type WrapperProps = {
	children: React.ReactNode;
}

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}

export default Wrapper;

출처) React Children with TypeScript
출처) TypeScript and React - children type?