React Portal의 SSR 대응법

react-portal 라이브러리가 Next.js의 서버사이드에서도 동작하도록 하기위한 코드입니다.
client 컴포넌트로 설정 후, 클라이언트 사이드에서만 확실히 렌더링하도록 조치하였습니다.

import { ReactNode, useEffect, useState } from 'react'

import { Portal } from 'react-portal'

export const PORTAL_ID = 'portal'

const MyPortal = ({ children }: { children: ReactNode }) => {

  const [initialized, setInitialized] = useState(false)

  useEffect(() => {

    setInitialized(true)

  }, [])

  return initialized ? <Portal node={document && document.getElementById(PORTAL_ID)}>{children}</Portal> : null

export default MyPortal