5. React와 함께 TypeScript 사용하기(4), [ props.children 의 사용, Layout 만들기]

props.children 을 사용하기 위해, 컴포넌트 함수에 React.FC 타입을 지정하면, 자동으로, children 이 나온다고 한다.

 

하지만 나는 React18 버젼을 쓰고있다.

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions

How to Upgrade to React 18 – React Blog

네, 암묵적인 children 선언이 사라졌습니다.

 

그래서 이제는 children 을 선언할때, React.ReactNode 타입으로 선언해야합니다.

 

 

props.children 사용하기 

    const Component: React.FC<{ children?: React.ReactNode }> = (props) => {
      const { children } = props;

 

props.children 을 이용하여, Layout 만들기

    const Layout: React.FC<{ children?: React.ReactNode }> = (props) => {
      const { children } = props;

      return (
        <div>
          <h1> 이게 레이아웃? </h1>
          {children}
          <h1> 이게 푸터? </h1>
        </div>
      );
    };

    export default Layout;