TIL-23.06.23

 

 

문제점

타입스크립트로 Portal을 생성하는 컴포넌트를 작성할때, children으로 들어오는 요소의 타입을 지정할때 어떠한 타입으로 지정해야하는지를 몰랐다. children으로 컴포넌트가 들어오게 되는데, 컴포넌트의 타입을 어떠한 변수를 지정해야하는지 검색해보기로 했다.

 

 

 

시도한점

import { createPortal } from 'react-dom';

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

const ModalPortal = ({children}: ModalPortalProps): React.ReactPortal | null => {
  const modalRoot = document.getElementById('modal-root');

  if (!modalRoot) {
    return null;
  }

  return createPortal(children, modalRoot);
};

export default ModalPortal;

 

children의 타입을 React.ReactNode로 지정하는 방법을 찾아냈다.

React.ReactNode타입은 컴포넌트의 children prop이나 JSX에서 사용되는 자식 요소에 대한 타입을 지정할때 주로 사용된다.

자식요소가 없을 수도 있고, 단일 요소일 수도 있으며, 여러 요소일 수도 있다. 이 타입을 사용하여 컴포넌트의 자식요소의 타입을 명시적으로 지정할수있다.