[Gatsby] Head API 사용 방법

[Gatsby] Head API 사용 방법Frontend/React2023. 1. 26. 23:13@고지니어스

Table of Contents

Gatsby Head API

Gatsby 에는 페이지의 문서 헤드에 요소를 추가할 수 있는 내장 head가 포함되어 있습니다.

react-helmet 또는 기타 유사한 솔루션과 비교할 때 Gatsby Head는 사용하기 쉽고 성능이 우수하며 번들 크기가 더 작고 최신 React 기능을 지원합니다.

// ex)
export const Head = () => <title>Home Page</title>;

SEO Component 를 사용하여 Head 함수를 정의할 수 있습니다.

// src/components/Seo.tsx
import React from 'react';

interface ISeoProps {
  title: string;
}

export default function Seo({ title }: ISeoProps) {
  return <title>{title} | Hello!</title>;
}

// index.tsx
import * as React from 'react';
import Seo from '../components/Seo';

export default function IndexPage() {
  return <div>Welcome</div>;
}

export const Head = () => <Seo title="Home Page" />;

Usage notes

Gatsby Head를 사용할 때 다음 사항에 유의해야 합니다.

구성 요소가 아닌 페이지 내부에서만 Head export 를 정의할 수 있습니다.
Gatsby Head 의 내용은 페이지 마운트 해제 시 지워지므로 각 페이지가 <head>에 필요한 내용을 정의하는지 확인해야 합니다.
Head 함수는 유효한 JSX를 반환해야 합니다.
Head 함수 내부의 유효한 태그는 link, meta, style, title, base, script 및 noscript 입니다.

참고

저작자표시 (새창열림)

'Frontend > React' 카테고리의 다른 글

[Gatsby] Page Query (0)	2023.02.01
[Gatsby] useStaticQuery(정적 쿼리 사용) (0)	2023.01.30
[Gatsby] Layout Components (0)	2023.01.18
[Gatsby] Routing (0)	2023.01.14
Gatsby 설치 및 사용 방법 (0)	2023.01.09

@고지니어스 :: 규니의 개발 블로그

IT 기술과 개발 내용을 포스팅하는 블로그

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

Gatsby Head API

Usage notes

참고

'Frontend > React' 카테고리의 다른 글

티스토리툴바