useIsClient

클라이언트 사이드 렌더링 여부를 확인하는 Hook입니다. SSR 환경에서 클라이언트/서버 환경을 구분하여 처리해야 할 때 사용됩니다.

Return

boolean - 클라이언트 환경이면 true, 서버 환경이면 false를 반환합니다.

Usage

import { useIsClient } from '@teamsparta/react';
 
function Example() {
  const isClient = useIsClient();
 
  return <div>{isClient ? '클라이언트' : '서버'}</div>;
}

Example

클라이언트 전용 컴포넌트

function ClientOnlyComponent() {
  const isClient = useIsClient();
 
  if (!isClient) {
    return null;
  }
 
  return <div>클라이언트에서만 보이는 컴포넌트</div>;
}

브라우저 API 사용

function LocalStorageComponent() {
  const isClient = useIsClient();
  const [data, setData] = useState<string | null>(null);
 
  if (!isClient) {
    return null;
  }
 
  // localStorage는 클라이언트에서만 사용 가능
  useEffect(() => {
    setData(localStorage.getItem('key'));
  }, []);
 
  return <div>저장된 데이터: {data}</div>;
}

조건부 렌더링

function ConditionalComponent() {
  const isClient = useIsClient();
 
  return (
    <div>{isClient ? <div>클라이언트 버전</div> : <div>서버 버전</div>}</div>
  );
}

주의사항

서버 사이드 렌더링 시에는 항상 false를 반환합니다.
하이드레이션 이후에는 true로 변경됩니다.
브라우저 API를 사용하기 전에 반드시 클라이언트 환경인지 확인해야 합니다.
불필요한 조건부 렌더링을 피하기 위해 꼭 필요한 경우에만 사용하세요.

useInterval useIsomorphicLayoutEffect