React로 프로젝트를 개발하던 중, <title> 태그를 분명 JSX에 작성했음에도 브라우저 탭 제목이 표시되지 않는 경험을 해본 적 있으신가요?
콘솔 에러도 없고, 코드상으로는 아무 문제가 없어 보이는데 말이죠.
이번 글에서는 실제로 React 공식 이슈 트래커에 올라온 이 현상을 소개하고,
왜 이런 일이 발생하는지, 그리고 어떻게 해결할 수 있는지를 정리해보았습니다.
❓ 무슨 일이 있었을까?
질문을 간단히 요약하자면, 다음과 같이 <title> 태그에 JSX 표현식을 사용하는 경우 브라우저 탭 제목이 표시되지 않습니다.
<title>{projectName} | Projects</title>
<title>{projectName}{section}</title>이유는 간단합니다. <title> 내부에 두 개 이상의 자식(JSX 노드)이 들어가게 되고,
React는 이를 HTML <head>로 hoisting하는 과정에서 유효하지 않은 구조로 판단해 빈 문자열로 처리해버리기 때문입니다.
결과적으로 아무것도 렌더링되지 않으며, 콘솔에도 경고나 오류는 출력되지 않습니다.
🧩 React는 <title>을 어떻게 처리할까?
React에서 <title>을 포함한 <head> 관련 태그는 일반 DOM처럼 직접 렌더링되지 않습니다.
이러한 태그들은 React 내부에서 자동으로 <head>로 hoisting(끌어올림) 되며,
이 과정에서 React는 <title>의 자식으로 정확히 하나의 문자열 노드만 있을 때만 정상적으로 처리합니다.
예를 들어 아래 JSX는:
<title>{projectName}{section}</title>다음과 같이 변환됩니다:
React.createElement("title", null, projectName, section);즉, 두 개의 자식 노드가 들어간 상태가 되고, 이는 HTML 명세에 위배되기 때문에
React는 해당 요소를 무시하거나 빈 문자열로 대체하게 되는 것입니다.
🤔 왜 자동으로 문자열로 합쳐주지 않을까?
이쯤에서 자연스럽게 이런 의문이 들었습니다.
JSX에서 {projectName}{section}처럼 작성된 코드는
개발자 입장에서는 하나의 문자열처럼 보이기 때문입니다.
React가 이를 내부적으로 projectName + section으로 자동 변환해 처리해주면
실수도 줄이고 예상치 못한 버그도 예방할 수 있지 않을까 싶었습니다.
📌 그럼에도 React가 자동으로 처리하지 않는 이유
React는 이런 모호한 상황에서 개발자가 명확하게 의도를 표현하기를 요구합니다.
자동으로 문자열을 합쳐버릴 경우, 다음과 같은 문제가 생길 수 있기 때문입니다:
-
projectName이나section값이 숫자나 undefined, 혹은 React 요소일 수도 있습니다. 이럴 경우 React가 자동으로 더하려고 하면 "undefinedProjects" 같은 예상치 못한 문자열이 만들어질 수 있어요. -
그리고
<title>처럼 브라우저의<head>에 삽입되는 요소는, React 내부에서도 특별하게 관리됩니다. 특히 next/head나 react-helmet 같은 서드파티 라이브러리와 함께 쓸 경우,
내부에서 어떤 값이 들어왔는지 정확하게 예측 가능해야 합니다. 그런데 자동으로 문자열을 합쳐버리면,
어떤 조합으로 만들어졌는지 추적하기 어려워지고,
이게 나중에 예상치 못한 동작(중복 삽입, 값 덮어쓰기 등)을 일으킬 수 있습니다.
따라서 React는 <title>처럼 민감한 위치에 들어가는 요소일수록
엄격하게 명세를 따르고, 개발자가 의도를 명확히 드러내도록 유도하는 방향을 택하고 있습니다.
✅ 올바른 사용 예
문제를 피하려면, 아래처럼 하나의 문자열로 합쳐서 전달하면 됩니다:
<title>{`${projectName} | ${section}`}</title>또는
<title>{projectName + " | " + section}</title>이렇게 작성하면 React가 올바르게 문자열 하나로 인식하여 <head>에 정상적으로 삽입됩니다.
