React.ReactNode 이해하기

React.ReactNode 는 React가 UI의 일부로 렌더링할 수 있는 값이나 객체의 유형을 설명하기 위한 TypeScript 유형 별칭입니다.

children prop은 React 구성 요소가 콘텐츠를 동적으로 관리하고 렌더링할 수 있는 수단입니다.

children의 장점은 유연성과 재사용이 가능하고 캡슐화된 구성 요소를 구축하기 위한 구성을 가능하게 하는 방법이 있습니다
이를 통해 포함할 내용을 명시적으로 알필요가 없는
레이아웃,
모달
같은 일반 구성 요소를 생성할 수 있습니다.

// GenericModal.jsx
import React from 'react';

const GenericModal = ({ title, children }) => (
  <div className="modal">
    <div className="modal-header">{title}</div> 
    <div className="modal-body">{children}</div> {/* Rendering children here */}
  </div>
);

export default GenericModal;

이 예에서 'GenericModal'은 모든 유형의 모달 콘텐츠에 재사용할 수 있도록 설계된 구성 요소입니다. 모달 헤더에 'title' 소품을 허용하고 'children' 소품을 사용하여 전달된 모든 항목을 모달 본문으로 렌더링합니다.

import React from 'react';
import GenericModal from './GenericModal';

const App = () => (
  <div>
    <GenericModal title="Welcome Modal">
      <p>This is a simple welcome message for our users.</p>
    </GenericModal>
    
    <GenericModal title="Confirmation">
      <p>Are you sure you want to proceed?</p>
      <button>Yes</button>
      <button>No</button>
    </GenericModal>
  </div>
);

export default App;

이 'App' 구성 요소에서는 'GenericModal'이 두 번 사용되며 매번 다른 하위 항목이 전달됩니다. 첫 번째 인스턴스는 간단한 메시지를 표시하고 두 번째 인스턴스는 버튼이 있는 확인 대화 상자를 제공합니다. 이는 children prop이 재사용 가능한 구성 요소 내에서 유연한 콘텐츠 구성을 허용하는 방법을 보여줍니다.