<title>
소개
브라우저 내장 <title> 컴포넌트를 사용하면 문서의 제목을 지정할 수 있어요.
<title>My Blog</title>레퍼런스
<title>
문서의 제목을 지정하려면, 브라우저 내장 <title> 컴포넌트를 렌더링하면 돼요. 어떤 컴포넌트에서든 <title>을 렌더링할 수 있고, React는 항상 해당 DOM 엘리먼트를 문서의 head에 배치해줄 거예요.
<title>My Blog</title>Props
<title>은 모든 공통 엘리먼트 props를 지원해요.
children:<title>은 텍스트만 자식으로 받아요. 이 텍스트가 문서의 제목이 될 거예요. 텍스트만 렌더링하는 한, 자신만의 컴포넌트를 전달할 수도 있어요.
특별한 렌더링 동작
React는 React 트리의 어디에서 렌더링되든 상관없이 항상 <title> 컴포넌트에 해당하는 DOM 엘리먼트를 문서의 <head> 안에 배치해요. <head>는 DOM 내에서 <title>이 존재할 수 있는 유일하게 유효한 위치인데, 특정 페이지를 나타내는 컴포넌트가 자체적으로 <title>을 렌더링할 수 있다면 편리하고 구성 가능한 상태를 유지할 수 있어요.
여기에는 두 가지 예외가 있어요:
<title>이<svg>컴포넌트 안에 있으면, 특별한 동작이 없어요. 이 맥락에서는 문서의 제목을 나타내는 게 아니라 해당 SVG 그래픽에 대한 접근성 주석이기 때문이에요.<title>이itemPropprop을 가지고 있으면, 특별한 동작이 없어요. 이 경우 문서의 제목이 아니라 페이지의 특정 부분에 대한 메타데이터를 나타내기 때문이에요.
⚠️ 함정(Pitfall)
한 번에 하나의
<title>만 렌더링하세요. 둘 이상의 컴포넌트가 동시에<title>태그를 렌더링하면, React는 그 모든 제목들을 문서 head에 넣어요. 이런 일이 발생하면, 브라우저와 검색 엔진의 동작은 정의되지 않아요.
💡 부연 설명: 여러
<title>이 동시에 렌더링되면 브라우저마다 다르게 동작할 수 있어요. 어떤 브라우저는 첫 번째 것을 사용하고, 어떤 브라우저는 마지막 것을 사용할 수도 있어요. SEO 관점에서도 문제가 될 수 있으니, 항상 한 번에 하나의<title>만 렌더링되도록 주의해야 해요!
사용법
문서 제목 설정하기
텍스트를 자식으로 가진 <title> 컴포넌트를 어떤 컴포넌트에서든 렌더링하세요. React가 문서의 <head> 안에 <title> DOM 노드를 넣어줄 거예요.
// src/App.js
import ShowRenderedHTML from './ShowRenderedHTML.js';
export default function ContactUsPage() {
return (
<ShowRenderedHTML>
<title>My Site: Contact Us</title>
<h1>Contact Us</h1>
<p>Email us at support@example.com</p>
</ShowRenderedHTML>
);
}💡 부연 설명: 이 기능이 정말 편리한 이유는, 예전에는 문서 제목을 변경하려면
document.title을 직접 조작하거나 react-helmet 같은 라이브러리를 사용해야 했는데, 이제는 React 컴포넌트 안에서 선언적으로 제목을 설정할 수 있기 때문이에요!
제목에 변수 사용하기
<title> 컴포넌트의 children은 반드시 단일 텍스트 문자열이어야 해요. (또는 단일 숫자나 toString 메서드를 가진 단일 객체도 가능해요.) 명확하지 않을 수 있는데, 다음과 같이 JSX 중괄호를 사용하면:
<title>Results page {pageNumber}</title> // 🔴 문제: 이건 단일 문자열이 아니에요... 실제로는 <title> 컴포넌트가 두 개의 엘리먼트 배열을 children으로 받게 돼요 ("Results page" 문자열과 pageNumber의 값). 이건 에러를 발생시킬 거예요. 대신, 문자열 보간(string interpolation)을 사용해서 <title>에 단일 문자열을 전달하세요:
<title>{`Results page ${pageNumber}`}</title>💡 부연 설명: 템플릿 리터럴(백틱
`)을 사용하면${}로 변수를 삽입할 수 있고, 이렇게 하면 최종 결과가 하나의 문자열이 돼요. JSX에서{expression} text {expression}형태로 쓰면 React는 이걸 배열로 처리하는데,<title>은 단일 문자열만 받을 수 있어서 에러가 나는 거예요. 이건 흔히 하는 실수 중 하나니까 꼭 기억해두세요!
