useIsMounted

컴포넌트가 클라이언트에서 마운트되었는지 확인합니다. SSR 하이드레이션 오류를 안전하게 방지할 수 있습니다.

컴포넌트가 클라이언트에서 완전히 마운트되었는지 여부를 확인하는 간단하고 안전한 훅입니다. 이 훅은 React의 useSyncExternalStore를 사용하여 서버 사이드 렌더링(SSR) 결과와 클라이언트 첫 번째 렌더링 결과를 완벽하게 일치시킴으로써 하이드레이션 불일치(Hydration Mismatch) 현상을 원천적으로 방지합니다.

useSyncExternalStore 서버 렌더링 지원 추가하기 참고.

설치

pnpm

pnpm dlx shadcn@latest add @chaesunbak/use-is-mounted

npm

npx shadcn@latest add @chaesunbak/use-is-mounted

다음 코드를 프로젝트에 복사하여 붙여넣으세요.

hooks/useIsMounted.ts

import { useSyncExternalStore } from "react";const subscribe = () => () => {};const getSnapshot = () => true;const getServerSnapshot = () => false;export function useIsMounted(): boolean {  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);}

사용법

import { useIsMounted } from "@/hooks/use-is-mounted";

function ClientOnlyComponent() {
  const isMounted = useIsMounted();

  if (!isMounted) {
    return <div>로딩 중...</div>;
  }

  return <div>클라이언트 전용 화면이에요!</div>;
}

인터페이스

속성	타입	설명
반환값	`boolean`	클라이언트 마운트가 완료되었는지 여부를 반환합니다. SSR 및 첫 렌더링 시점에는 `false`이며, 마운트 완료 시 `true`가 됩니다.

useIsMounted

설치

사용법

인터페이스

useIsMounted

On this page