- 에러 내용
app-index.js:35 Warning: Expected server HTML to contain a matching <div> in <body>.
at div at O (webpack-internal:///(app-pages-browser)/./node_modules/styled-components/dist/styled-components.browser.esm.js:33:23472)
at Header (webpack-internal:///(app-pages-browser)/./src/component/header.tsx:32:82)
at Mobile (webpack-internal:///(app-pages-browser)/./src/component/mediaQuery.tsx:13:11)
at EventPage (webpack-internal:///(app-pages-browser)/./src/app/event/page.tsx:44:68)Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (react-dom.development.js:7088:9) An error occurred during hydration. The server HTML was replaced with client content in <#document>.
'use client'
import { FC, ReactNode } from 'react'
import { useMediaQuery } from 'react-responsive'
interface IMediaQueryProps {
children: ReactNode
}
export const Mobile = ({ children }: IMediaQueryProps) => {
const isMobile = useMediaQuery({
query: '(max-width:767px)',
})
return isMobile ? <>{children}</> : null
}
export const Tablet = ({ children }: IMediaQueryProps) => {
const isTablet = useMediaQuery({
query: '(min-width:767px) and (max-width:1023px)',
})
return isTablet ? <>{children}</> : null
}
export const PC = ({ children }: IMediaQueryProps) => {
const isPC = useMediaQuery({
query: '(min-width:1023px)',
})
return isPC ? <>{children}</> : null
}에러 원인
- 해당 컴포넌트에서 불러올때 나는 에러
- 트리상의 불일치가 발생해서 Hydration을 정상적으로 실행할 수 없는 것
- 해당 코드가 초기 View를 Pre-Rendering하는 SSR 과정에서 존재하지 않는 document에 접근하려고 했기 때문
에러가 났던 코드
useMediaQueryHooks() return( <Mobile> //...pass </Mobile> )
해결코드
const screen = useMediaQueryHooks() return( {screen === 'isMobile' && ( <Mobile> //...pass </Mobile> )}
:D