Using React Children Prop in Typescript

export default function Layout({ children }) {
  return (
    <>
      <NavBar />
      <div></div>
    </>
  );
}

위 같은 컴포넌트를 만들고자 할 때 typescript에서는 children prop의 타입을 선언해주지 않으면 에러를 발생한다. React Children의 타입이 뭔지 몰랐기 때문에 이 참에 알아보니 React.PropsWithChildren을 사용하면 된다고 한다. 이 녀석이 무슨 타입을 명시해주는지 deep dive 해보면

type PropsWithChildren<P = unknown> = P & {
    children?: React.ReactNode;
}

이런 타입이 나온다.

몇몇 알수 없는 것들을 지나치고 보면 children의 타입을 React.ReactNode로 명시해주는 걸 볼 수 있다. 생각해보니 맞는 말이다.

위 내용을 알아보던중 함수형 컴포넌트의 타입을 도와주는 FC(Functional Component)타입도 자주 마주 칠 수 있었는데 아직은 흥미가 안생기므로 나중에 다시 제대로 마주치면 승부를 걸어보겠다.