[DAY58]TypeScript , React 레이아웃 설정하기

1. 문제
   React.js 에서 레이아웃을 설정해 주던 것 처럼 하려는데, children에도 타입이 필요하다는 오류가 발생했다.. 대체 children에 어떤 타입을 줄 수가 있단 말인가?

2. 시도
   React.FC, React.Element 등을 적용해봄.. 하지만 실패

3. 해결

type Props = {
  children: React.ReactNode;
};

const Layout = ({ children }: Props) => {
  return (
    <>
      <Header />
      <Test>{children}</Test>
      <Footer />
    </>
  );
};

4. 알게된 점
   React.ReactNode를 설정해주면 된다.
   ReactNode 타입은 jsx 내에서 사용할 수 있는 모든 요소의 타입을 의미, 즉 string, null, undefined 등을 포함하는 가장 넓은 범위를 갖는 타입이다.

하지만 !!!!! 새롭게 알게된 사실.

const Layout = ({ children }:PropsWithChildren ) => {
  return (
    <>
      <Header />
      <Test>{children}</Test>
      <Footer />
    </>
  );
};

위와 같이 PropsWithChildren 을 사용하면 된다.
이를 더 확장시켜서 다른 프롭스와 함께 사용하려면,

type Props = {
	color:string;
} & PropsWithChildren;

이렇게 사용할 수도 있다.