React

24. 12. 06.

React v19 <meta> 사용해보기

Intro

2024년 12월 5일 자로 React v19가 Stable 버전으로 릴리즈되었다.

이번 업데이트는 성능 개선과 개발자 경험(DX) 향상을 목표로 다양한 기능과 변경 사항을 포함하고 있는데,

  • 비동기 작업을 보다 간단히 처리할 수 있는 Actions API
  • 요청이 완료되기 전에 사용자에게 피드백을 제공하는 낙관적 업데이트 useOptimistic 훅
  • 데이터가 준비될 때까지 UI를 대기 상태로 유지할 수 있는 use API
  • 정적 페이지 생성을 위한 prerender, prerenderToNodeStream API
  • <title>, <meta>, <link> 태그를 <head>로 자동 이동해주는 메타데이터 지원

이 외에도 에러 리포팅 개선, 스타일 시트 및 스크립트 관리를 단순화하는 등 크고 작은 변경점들이 포함되어 있다.

나는 SPA의 주요한 단점인 SEO를 위해 <meta> 태그를 내 블로그 프로젝트에 적용해보겠다.

1. React v19 Upgrede

npm install --save-exact react@^19.0.0 react-dom@^19.0.0

//TypeScript를 사용하고 있다면 아래까지 추가
npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0

공식문서 React v19 Upgrade Guide를 참고해 버전을 업그레이드 해준다.

2. meta

<meta>는 문서에 메타데이터를 추가할 수 있게하는 React 컴포넌트이다.

React 트리의 어느 컴포넌트에서든 사용할 수 있으며, React는 해당 DOM 요소를 문서의 <head>에 배치한다.

Props

<meta>는 다음 속성 중 하나만 사용할 수 있다.

  • name: 메타데이터 종류 지정
  • httpEquiv: 문자 인코딩 지정 ("utf-8"만 유효)
  • charset: 문서 처리 지시 사항 지정
  • itemProp: 특정 항목에 대한 메타데이터 지정

content 속성은 name 또는 itemProp과 함께 메타데이터를 지정할 때 사용하며, httpEquiv와 함께 사용하면 브라우저 동작을 제어하는 지시 사항을 설정합니다.

특수 렌더링 동작

<meta>는 React 트리에서 렌더링 위치에 상관없이 항상 문서의 <head>에 배치된다.

단, <itemProp> props가 있는 경우에는 문서에 대한 메타데이터가 아닌, 페이지 특정 부분에 대한 메타데이터를 나타내므로 특수한 동작이 적용되지 않는다.

3. 사용법

문서에 메타데이터 추가

사용법은 HTML의 meta 태그와 크게 다르지 않다.

문서에 메타데이터를 추가하려면 <meta>를 사용하면 된다.

<meta name="author" content="John Smith" />
<meta name="keywords" content="React, JavaScript, semantic markup, html" />
<meta name="description" content="API reference for the <meta> component in React DOM" />

문서 내 특정 항목에 메타데이터 추가

특정 항목에 메타데이터를 추가하려면 <itemProp> props를 사용하면 된다.

이 경우 React는 현재 컴포넌트의 위치에 <meta>를 유지한다.

<section itemScope>
  <h3>Annotating specific items</h3>
  <meta
    itemProp="description"
    content="API reference for using <meta> with itemProp"
  />
  <p>...</p>
</section>

내 프로젝트에 적용하기

이 블로그의 경우, 각 md 파일의 Front Matter를 활용하여 게시글 목록 혹은 게시글 상세 페이지에서 활용한다.

마찬가지로 게시글 정보를 Metadata로 활용하는 가장 효율적인 방법은 Front Matter를 재사용하는 것이라 생각했다.

const PageMetadata = ({ frontMatter }: { frontMatter: FrontMatter }) => {
    return (
        <>
            <title>{frontMatter.title}</title>
            <meta name="description" content={frontMatter.description} />
            <meta property="og:title" content={frontMatter.title} />
            <meta property="og:type" content="website" />
            <meta property="og:description" content={frontMatter.description} />
            <meta property="og:image" content="/Symbol.svg" />
        </>
    );
};

export default PageMetadata;
<>
  <PageMetadata frontMatter={frontmatter} />
  <main></main>
</>

다음과 같이 page의 Front Matter를 메타데이터 코드로 활용하는 컴포넌트를 각 게시글 상세 페이지를 렌더링하는 레이아웃에 삽입한다면 손 쉽게 재사용할 수 있다.

마무리

React v19를 통해 React의 방향성이 SPA를 넘어, 서버 사이드 렌더링과 정적 사이트 생성을 더욱 강력하게 지원하고자 함을 확인할 수 있었다.

Next.js를 사용하며 편리함과 생산성에 감탄했었는데, React 만으로도 클라이언트와 서버를 자유롭게 구현할 수 있는 시대가 머지않은 것 같다.

Reference