React 개발자라면 꼭 알아야 할 10가지 브라우저 API Hooks

Source: Dev.to

모던 브라우저는 위치 정보, 클립보드 접근, 전체 화면 모드, 네트워크 상태 등 강력한 API들을 기본으로 제공합니다. 이러한 API들을 React에서 직접 사용하려면 생각보다 복잡합니다. 서버‑사이드 렌더링을 방지하고, 이벤트 리스너를 추가·제거하며, 권한을 처리하고, 언마운트 시 정리 작업을 해야 합니다. 앱이 사용하는 모든 브라우저 API마다 이러한 작업을 반복하면 코드가 많이 중복되고 오류가 발생하기 쉽습니다.

ReactUse는 브라우저 API를 깔끔하고 SSR‑안전하며 TypeScript‑친화적인 인터페이스로 감싸는 100개 이상의 훅을 제공함으로써 이 문제를 해결합니다. 아래에 소개된 모든 훅은 API에 접근하기 전에 브라우저 환경을 확인하므로 Next.js, Remix, 기타 SSR 프레임워크에서도 바로 사용할 수 있습니다. 한 번 설치하고 필요한 훅만 가져다 쓰세요:

npm i @reactuses/core

1. useMediaQuery – 반응형 디자인

JavaScript에서 CSS 미디어 쿼리에 대응합니다. 이 훅은 뷰포트가 변경될 때 실시간으로 업데이트되는 boolean 값을 반환합니다.

import { useMediaQuery } from "@reactuses/core";

function App() {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return {isMobile ?  : };
}

스크린 크기에 따라 레이아웃을 조건부로 렌더링하거나, 다른 자산을 로드하거나, CSS만에 의존하지 않고 기능을 토글하는 데 사용하세요.

2. useClipboard – 클립보드에 복사

현대 Clipboard API를 사용하여 시스템 클립보드에서 읽고 쓸 수 있습니다. 이 훅은 권한, HTTPS 요구사항 및 포커스 상태와 관련된 엣지 케이스를 처리합니다.

import { useClipboard } from "@reactuses/core";

function CopyButton({ text }: { text: string }) {
  const [clipboardText, copy] = useClipboard();
  return (
     copy(text)}>
      {clipboardText === text ? "Copied!" : "Copy"}
    
  );
}

3. useGeolocation – 사용자 위치

사용자의 지리 좌표를 추적하며, 언마운트 시 watchPosition 리스너를 자동으로 정리합니다.

import { useGeolocation } from "@reactuses/core";

function LocationDisplay() {
  const { coordinates, error, isSupported } = useGeolocation();

  if (!isSupported) return 
Geolocation is not supported.
;
  if (error) return 
Error: {error.message}
;

  return (
    
      Lat: {coordinates.latitude}, Lng: {coordinates.longitude}
    
  );
}

4. useFullscreen – 전체 화면 모드

어떤 요소든 전체 화면을 토글합니다. 이 훅은 Fullscreen API를 래핑하고 현재 상태와 제어 함수를 반환합니다.

5. useNetwork – 온라인/오프라인 상태

사용자의 네트워크 연결을 모니터링합니다. 이 훅은 온라인/오프라인 상태를 추적하고, 가능한 경우 effectiveType 및 downlink와 같은 연결 세부 정보를 제공합니다.

import { useNetwork } from "@reactuses/core";

function NetworkBanner() {
  const { online, effectiveType } = useNetwork();

  if (!online) return You are offline;

  return Connection: {effectiveType};
}

6. useIdle – 유휴 감지

사용자가 페이지와의 상호작용을 중단했을 때를 감지합니다. 이 훅은 마우스, 키보드, 터치 및 가시성 이벤트를 감시하며 지정된 타임아웃이 지나면 true를 반환합니다.

import { useIdle } from "@reactuses/core";

function IdleWarning() {
  const isIdle = useIdle(300_000); // 5 minutes
  return isIdle ? Are you still there? : null;
}

7. useDarkMode – 다크 모드 토글

시스템 선호도 감지, localStorage 영속성, 그리고 루트 요소에 대한 자동 클래스 토글을 통해 다크 모드를 관리합니다.

import { useDarkMode } from "@reactuses/core";

function ThemeToggle() {
  const [isDark, toggle] = useDarkMode({
    classNameDark: "dark",
    classNameLight: "light",
  });

  return (
    
      {isDark ? "Switch to Light" : "Switch to Dark"}
    
  );
}

8. usePermission – 권한 상태

브라우저 권한(위치, 카메라, 마이크, 알림 등)의 상태를 조회하고 실시간으로 변화에 대응합니다.

import { usePermission } from "@reactuses/core";

function CameraAccess() {
  const status = usePermission("camera");

  if (status === "denied") return 
Camera access was denied.
;
  if (status === "prompt") return 
We need camera permission.
;

  return 
Camera access granted.
;
}

9. useLocalStorage – 지속 상태

useState를 대체하는 드롭‑인 구현으로, localStorage에 상태를 영구히 저장합니다. 직렬화, SSR 안전성, storage 이벤트를 통한 탭 간 동기화, 오류 복구를 처리합니다.

import { useLocalStorage } from "@reactuses/core";

function Settings() {
  const [lang, setLang] = useLocalStorage("language", "en");

  return (
     setLang(e.target.value)}>
      English
      Spanish
      French
    
  );
}

10. useEventListener – 이벤트 처리

이벤트 리스너를 선언형으로 연결하고 자동 정리 및 SSR 안전성을 제공합니다.

import { useEventListener } from "@reactuses/core";

function ResizeLogger() {
  useEventListener("resize", () => {
    console.log("Window resized to", window.innerWidth, "x", window.innerHeight);
  });

  return null;
}

이 훅들(및 더 많은 훅들)은 브라우저 API를 깨끗하고, 재사용 가능하며, 타입‑안전하게 사용할 수 있게 해줍니다—보통 필요로 하는 보일러플레이트 없이. 즐거운 코딩 되세요!

useEventListener Hook

대상(window, document 또는 특정 요소)에 이벤트 리스너를 연결하고 자동 정리와 TypeScript‑안전 이벤트 타입을 제공하는 Hook입니다.

import { useEventListener } from "@reactuses/core";

function KeyLogger() {
  useEventListener("keydown", (event) => {
    console.log("Key pressed:", event.key);
  });
  return 
Press any key…
;
}

Enter fullscreen mode

전체 화면 모드 진입

Exit fullscreen mode

전체 화면 모드 종료

This is the foundational hook that many other hooks in ReactUse are built on. It avoids stale closures by always referencing the latest handler.

이 Hook은 ReactUse의 다른 많은 Hook들이 기반으로 하는 기본 Hook이며, 항상 최신 핸들러를 참조함으로써 오래된 클로저를 방지합니다.

수동 구현 vs. ReactUse

단일 훅에 대해서는 절감 효과가 미미합니다. 다섯 개 이상의 브라우저 API를 사용하는 전체 애플리케이션에서는 ReactUse가 방어적 코드 수백 줄을 없애줍니다.

FAQ

이 훅들은 SSR‑안전한가요?

네. ReactUse의 모든 훅은 브라우저 접근성을 확인한 뒤 API를 사용합니다. 서버‑사이드 렌더링 중에는 훅이 안전한 기본값을 반환하고 브라우저 전용 로직을 건너뜁니다.

사용하지 않는 훅들을 트리‑쉐이킹할 수 있나요?

네. @reactuses/core에서 직접 가져오면 트리‑쉐이킹이 지원됩니다. 번들러는 실제로 import한 훅만 포함합니다.

이 훅들은 React 18 및 19와 호환되나요?

ReactUse는 React 16.8 이상을 지원합니다. 모든 훅은 React 18의 concurrent 기능 및 React 19와 호환됩니다.

ReactUse는 React용 100+ 개의 훅을 제공합니다. Explore them all →