경고내용
titleelement에 1개 이상의 자식요소가 있다는 경고
문자만 자식으로 가질 수 있다
Warning: A title element received an array with more than
1 element as children.
In browsers title Elements can only have Text Nodes as children.
If the children being rendered output more than a
single text node in aggregate the browser will display
markup and comments as text in the title and hydration
will likely fail and fall back to client rendering
at title- 수정 전 코드
import Head from 'next/head'
export default function Seo({ title }: { title: string }) {
return (
<Head>
<title> {title} | xmunt blog</title>
</Head>
)
}원인
문제되는 부분
<title> {title} | xmunt blog</title>이부분이 React render에서는
<title> <!-- -->{title}<!-- --> | xmunt blog</title>변수 앞뒤로 주석으로 되는데 주석은 HTML노드여서 하위노드로 간주된다
주석-글자-주석-글자 => 이런식으로 여러 개의 자식노드가 있는 셈이 되어버린다
해결
방법 1
import Head from 'next/head'
export default function Seo({ title }: { title: string }) {
const titlemsg = `${title} | xmunt blog`
return (
<Head>
<title>{titlemsg}</title>
</Head>
)
}방법 2
import Head from 'next/head'
export default function Seo({ title }: { title: string }) {
return (
<Head>
<title>{`${title} | xmunt blog`}</title>
</Head>
)
}
터벅터벅 나의 개발 일상