API 참고서
컴포넌트

<meta>

내장 브라우저 <meta> 컴포넌트를 사용하면 문서에 메타데이터를 추가할 수 있습니다.

<meta name="keywords" content="React, JavaScript, semantic markup, html" />

레퍼런스

<meta>

문서 메타데이터를 추가하려면 내장 브라우저 <meta> 컴포넌트를 렌더링하세요. 어느 컴포넌트에서나 <meta>를 렌더링할 수 있으며, React는 항상 해당 DOM 요소를 문서의 <head>에 배치합니다.

<meta name="keywords" content="React, JavaScript, semantic markup, html" />

아래에서 더 많은 예시를 확인하세요.

Props

<meta>는 모든 공통 엘리먼트 Props를 지원합니다.

다음 속성 중 하나만 가져야 합니다. name, httpEquiv, charset, itemProp.

<meta> 컴포넌트는 지정된 Props에 따라 각각 다른 동작을 합니다.

  • name: 문자열. 문서에 첨부될 메타데이터 종류를 지정합니다.
  • charset: 문자열. 문서에서 사용되는 문자 인코딩을 지원합니다. 유효한 값은 "utf-8" 뿐 입니다.
  • httpEquiv: 문자열. 문서를 처리할 지시 사항을 지정합니다.
  • itemProp: 문자열. 문서 전체가 아닌 문서 내 특정 항목에 대한 메타데이터를 지정합니다.
  • content: 문자열. name 또는 itemProp Props와 함께 사용 시 첨부될 메타데이터를 지정하거나, httpEquiv Props와 함께 사용 시 지시 사항의 동작을 지정합니다.

특수 렌더링 동작

React는 <meta> 컴포넌트가 React 트리 어디에서 렌더링되든 상관없이 해당하는 DOM 요소를 항상 문서의 <head> 내에 배치합니다. DOM 내에서 <head>는 <meta>가 존재할 수 있는 유일한 유효한 위치이지만, 특정 페이지를 나타내는 컴포넌트가 <meta> 컴포넌트를 자체적으로 렌더링할 수 있다는 점이 편리하고, 구성 가능성을 유지해 줍니다.

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

사용법