useIsClient

현재 렌더링 환경이 클라이언트인지 여부를 반환하는 커스텀 훅입니다.

useSyncExternalStore를 기반으로 구현되어, 일반적인 useEffect 방식과 달리 초기 렌더링부터 클라이언트 환경을 정확하게 감지합니다. useEffect 방식은 초기 렌더링 시 false를 반환하고 이후 true로 업데이트되어 이중 렌더링이 발생할 수 있지만, 이 훅은 그런 문제가 없습니다.

useIsMounted와의 차이

• useIsClient: 현재 렌더링 환경이 클라이언트인지를 확인합니다. SSR 없이 순수 CSR 환경에서도 즉시 true를 반환합니다.
• useIsMounted: 컴포넌트가 실제로 마운트된 상태인지를 확인합니다. useEffect 기반으로 동작합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

function useIsClient(): boolean;

Returns

Name	Type	Description
isClient	boolean	클라이언트 환경이면 true, 서버 환경이면 false

Usage

기본 사용법

typescript

import { useIsClient } from '@modern-kit/react';

const Component = () => {
  const isClient = useIsClient();

  return <div>{isClient ? '클라이언트' : '서버'}</div>;
};

클라이언트 전용 API 사용

서버에서 접근할 수 없는 window, navigator 등의 API를 안전하게 사용할 때 활용합니다.

typescript

import { useIsClient } from '@modern-kit/react';

const Component = () => {
  const isClient = useIsClient();

  const userAgent = isClient ? navigator.userAgent : null;

  return <div>{userAgent ?? '서버 렌더링 중...'}</div>;
};

Example

🧪 테스트 방법: 현재 렌더링 환경을 확인하세요.

현재 환경: ⚠️ 서버

💡 핵심: useSyncExternalStore를 사용하므로 이중 렌더링 없이 초기 렌더링부터 정확한 환경을 반환합니다.