useIsClient

useIsClient는 클라이언트 환경에서만 true를 반환하는 리액트 훅이에요. 주로 클라이언트와 서버 사이드 렌더링(SSR)을 구분하기 위해 사용돼요. 컴포넌트가 클라이언트 환경에서 마운트된 후에만 true로 설정돼요.

인터페이스

function useIsClient(): boolean;

파라미터

이 함수는 파라미터를 받지 않아요.

반환 값

• boolean
  

  클라이언트 환경에서는 true를 반환하고, 그 외에는 false를 반환해요.

예시

function ClientSideContent() {
  const isClient = useIsClient();

  if (!isClient) {
    return <div>로딩 중...</div>; // 서버 사이드에서 렌더링돼요
  }

  return <div>클라이언트 사이드에서 렌더링된 내용</div>; // 클라이언트 사이드에서 렌더링돼요
}

function ClientOnlyMap() {
  const isClient = useIsClient();

  if (!isClient) return null;

  return <div id="map" />;
}

function ClientTheme() {
  const isClient = useIsClient();

  const theme = isClient ? localStorage.getItem('theme') : 'light';

  return <div>현재 테마: {theme}</div>;
}