@modern-kit/react
Version:
1 lines • 2.06 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/components/ClientGate/index.tsx"],"sourcesContent":["import { useIsClient } from '../../hooks/useIsClient';\n\ninterface ClientGateProps {\n children: React.ReactNode;\n fallback?: React.ReactNode;\n}\n\n/**\n * @description `ClientGate`는 렌더링 환경에 따라 다른 컨텐츠를 보여주는 컴포넌트입니다:\n * - Client Side: `children` 컴포넌트를 렌더링\n * - Server Side: `fallback` 컴포넌트를 렌더링\n *\n * `CSR(Client-Side Rendering)` 환경에서는 컴포넌트가 마운트되기 전부터 children이 렌더링됩니다.\n *\n * 일반적인 `useEffect` 사용하여 클라이언트 사이드 렌더링을 감지할 경우, 다음과 같은 문제가 발생할 수 있습니다:\n * - 초기 렌더링에서 fallback이 표시됨\n * - `useEffect` 실행 후 children으로 리렌더링되는 `이중 렌더링` 발생\n *\n * `useSyncExternalStore`를 사용하여 서버와 클라이언트 간의 hydration mismatch를 방지합니다.\n * @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store#usesyncexternalstore\n *\n * @param {ClientGateProps} props - 컴포넌트의 속성\n * @param {React.ReactNode} props.children - 클라이언트에서 렌더링할 자식 요소\n * @param {React.ReactNode} props.fallback - 서버 렌더링 시 표시할 대체 요소\n * @returns {JSX.Element} - 서버에서는 fallback을, 클라이언트에서는 children을 반환\n *\n * @example\n * <ClientGate fallback={<div>서버 환경입니다.</div>}>\n * <div>클라이언트 환경입니다.</div>\n * </ClientGate>\n */\nexport function ClientGate({\n fallback,\n children,\n}: ClientGateProps): JSX.Element {\n const isClient = useIsClient();\n\n return <>{isClient ? children : fallback}</>;\n}\n"],"names":[],"mappings":";;;;;AA+BO,SAAS,UAAA,CAAW;AAAA,EACzB,QAAA;AAAA,EACA;AACF,CAAA,EAAiC;AAC/B,EAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,EAAA,uBAAO,GAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,QAAA,GAAW,QAAA,GAAW,QAAA,EAAS,CAAA;AAC3C;;;;"}