React.js에서 TypeScript를 사용할 때 다른 컴포넌트를 감싸는 컴포넌트는 어떻게 선언할 수 있을까요?

TIL

TypeScript에서 prop으로 children Component를 받을 수 있게 하면 됩니다.

이 때, prop의 타입은 아래와 같이 지정해줬습니다.

type Props = {
  children: string | JSX.Element | JSX.Element[]
}
 
const Layout = ({ children }: Props) => <Parent>{children}</Parent>
type Props = {
  children: string | JSX.Element | JSX.Element[]
}
 
const Layout = ({ children }: Props) => <Parent>{children}</Parent>

사용

const Page = () => (
  <Layout>
    <Children />
  </Layout>
)
const Page = () => (
  <Layout>
    <Children />
  </Layout>
)

아주 간단하죠!😃