무엇
<title>은 브라우저 탭과 검색 결과에 뜨는 문서 제목이다. React 19부터는 컴포넌트 트리 어디에 렌더하든 React가 자동으로 <head>로 올려 준다.
페이지 컴포넌트가 자기 제목을 그 자리에서 선언할 수 있다. head를 따로 관리하지 않아도 된다.
export function BlogPage() {
return (
<>
<title>내 블로그</title>
<h1>블로그</h1>
</>
)
}
무슨 일이 일어나나
React는 <title>을 렌더 위치와 무관하게 항상 문서 <head>에 놓는다. 대신 한 번에 하나만 렌더해야 한다. 동시에 여러 <title>이 렌더되면 React는 그 모두를 head에 넣고, 이때 브라우저·검색 엔진의 동작은 정의되지 않는다.
자식은 단일 문자열이어야 한다. <svg> 안의 <title>은 문서 제목이 아니라 SVG 접근성 주석으로 취급되고, itemProp이 붙으면 문서 제목이 아니라 그 구획의 메타데이터가 된다.
사용법
변수를 섞을 때는 템플릿 리터럴로 하나의 문자열을 만들어 넘긴다. 정적 텍스트와 표현식을 나란히 두면 자식이 배열이 돼 의도와 어긋난다.
export function ResultsPage({ page }: { page: number }) {
return (
<>
<title>{`검색 결과 ${page}쪽`}</title>
<h1>검색 결과</h1>
</>
)
}
실무 예시
라우트마다 제목을 그 페이지 컴포넌트 안에서 선언하면, head 관리 코드를 따로 두지 않고도 제목이 페이지를 따라간다.
export function ArticlePage({ title }: { title: string }) {
return (
<>
<title>{`${title} — zerovoids`}</title>
<article>…</article>
</>
)
}
왜 중요한가
문서 제목은 SEO·공유·탭 식별에 직접 닿는 작은 표면이다. React 19가 <title>을 컴포넌트 안에서 선언 가능하게 만든 건 편의지만, 실전 앱은 대부분 프레임워크의 메타데이터 계층 위에서 돌아가서 이 날것 기능을 직접 쓸 일은 많지 않다. 그래도 "제목은 하나만", "자식은 단일 문자열" 두 규칙은 어느 방식으로 제목을 넣든 통하는 기본이라 알아 둘 값이 있다.
Reference