React.ReactNode

interface SectionTemplateProps {
  title: string;
  imageSrc: string;
  children: React.ReactNode;
}

export default function SectionTemplate({
  title,
  imageSrc,
  children,
}: SectionTemplateProps) {
  return (
    <section>
      <header className="main">
        <h1>{title}</h1>
      </header>

      <span className="image main">
        <img src={imageSrc} style={{ height: 300 }} alt="section image" />
      </span>

      <div>{children}</div>
    </section>
  );
}

 

import SectionTemplate from "./SectionTemplate";

export default function AnotherPage() {
  return (
    <SectionTemplate
      title="useEffect"
      imageSrc={`${import.meta.env.BASE_URL}images/img02.jpeg`}
    >
      {/* 변경될 내용 */}
      <p>useEffect는 컴포넌트의 생명주기에 따라 특정 동작을 실행할 때 사용됩니다.</p>
      <p>예를 들어, 데이터 가져오기, 이벤트 리스너 추가/제거 등을 처리할 수 있습니다.</p>
    </SectionTemplate>
  );
}