아픈 건 싫으니까 HoC에 올인하려고 합니다

Next.js + HoC Head

2022.05.17수정

featured image thumbnail for post 아픈 건 싫으니까 HoC에 올인하려고 합니다

이번 포스팅에서는 HoC를 사용하여 Head 컴포넌트를 꾸며볼 겁니다.

모두 준비됐나요~? (준비 됐어요~)

HoC?

고차 컴포넌트(HOC, Higher-order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다.

(출처: Reactjs)

주의사항

ref는 전달되지 않습니다.

render 또는 return 안에서의 사용은 금지됩니다. (export default에서만 사용 가능)

저거 사탄이네?

withHead.js

HoC 파일명은 with가 앞에 붙습니다.

import Head from 'next/head';

const withHead = (Component, title, pageName, pageRouter) => {
  const App = props => {
    const domain = `https://도메인명`
    const currentUrl = `${domain}/${pageRouter}`

    return (
      <>
        <Head>
          <link rel='canonical' href={currentUrl} />
          <meta httpEquiv="X-UA-Compatible" content="IE=edge, chrome=1" />
          <meta name='format-detection' content='telephone=no' />
          <meta name='viewport' content='width=device-width, initial-scale=1, viewport-fit=cover' />
          <title>{title} : {pageName}</title>
          <meta name='description' content={description} />
          <meta name="twitter:card" content="summary_large_image" />
          <meta property='og:title' content={`${title} : ${pageName}`} />
          <meta property='og:description' content={description} />
          <meta property='og:url' content={currentUrl} />
          <meta property='og:locale' content='ko_kr' />
          <meta property='og:image' content={`${domain}/opengraph.png?${(Math.random() * 7).toString(7)}`} />
          <meta property='og:type' content='website' />
          <meta property='og:site_name' content={siteName} />
        </Head>
        <Component {...props} />
      </>
    );
  };

  return App;

};

export default withHead;

index.js

_app.js, _document.js는 건드실 게 없습니다. 이 외에 pages에 들어가는 코드들(커스텀 에러 페이지 포함)에 대해 다음 코드만 포함시키면 됩니다.

import withHead from '@/components/utilities/withHead';

function Home(props) {
  return (
    <div>메인</div>
  )
}

export default withHead(Home, '웹사이트 이름', '');

메인이라서 페이지 이름(두번째 칸)을 비워두었습니다.

FIN!