Hydration Handler

Hydration Error

리팩터링을 진행하는 과정에서, window가 mount되기 전에 발생하는 hydration Error를 관리하는 코드가 컴포넌트별로 반복된다는 것을 발견했다.
따라서, 이를 재사용이 가능한 HydrationHandler 컴포넌트로 선언해, Error Handler가 필요한 파일 내에서 import하는 방식을 채택했다.

import { ReactNode } from 'react';

const HydrationHandler = ({ children }: { children: ReactNode }) => {
  return (
    <div suppressHydrationWarning>
      {typeof window === 'undefined' ? null : children}
    </div>
  );
};

export default HydrationHandler;

원하는 컴포넌트에서 import 및 사용.

import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <HydrationHandler>
      <Component {...pageProps} />
    </HydrationHandler>
  );
}

export default MyApp

reactPortal