React 19 Hoisting 기반의 JSX Meta 시스템을 통한 설정 중심 SEO 탈피

Context

기존 Next.js나 Remix 등 대부분의 프레임워크는 Meta데이터를 정적인 Config 객체 형태로 관리하는 구조를 채택함. 이로 인해 동적인 SEO 대응 시 명령형 로직을 통한 객체 조작이 강제되며, 프레임워크 전용 스키마 학습 비용이 발생하는 한계가 존재함.

Technical Solution

• React 19의 Hoisting 기능을 활용해 head.tsx를 일반 React 컴포넌트로 정의하는 구조 설계
• LoaderData를 Props로 직접 전달받아 JSX 내에서 조건부 렌더링 및 Map 함수를 이용한 동적 Meta 태그 생성
• Root부터 Page까지 이어지는 계층적 렌더링 구조를 통해 하위 경로의 태그가 상위 설정을 덮어쓰는 자연스러운 Override 메커니즘 구현
• MetaProvider 같은 별도의 상태 관리 레이어 없이 React 플랫폼 레벨에서 , , 태그를 문서 헤드로 자동 이동
• dangerouslySetInnerHTML를 이용한 인라인 스크립트 삽입으로 First Paint 이전의 테마 설정 등 초기화 로직 수행