레이아웃 공유하기 (HOC)

1. 레이아웃 페이지

// Layout.jsx

// import 생략

const Layout = ({ title, main, urlToPost }) => {
  return (
    <div className={comu.wrapper}>
      <div className={header.header}>{title}</div>
      <div className={comu.mainContainer>{main}</div>
      <Link href={urlToPost} passHref>
        <a className={styles.addBtn}>+</a>
      </Link>
    </div>
  );
};

export default Layout;

2. 내용 작성

• 화면에 렌더링할 내용은 레이아웃 컴포넌트에 props로 보낸다.
• 컴포넌트를 만들어서 props로 보낼 수 있다. Content컴포넌트를 만들었다.

// page.jsx

// import 생략

const Index = () => {
  return (
    <MainPage
      title={"Community"}
      main={<Content></Content>}
      urlToPost={"/"}
    ></MainPage>
  );
};

const Content = () => {
  return <div>
  			<p>컴포넌트로</p>
            <p>만들 수 있어</p>
         </div>;
};

export default Index;

참고: https://www.sitepoint.com/creating-reusable-react-components/