use hook

리액트에서 use 훅이란?

React 18부터 도입된 use 훅은 비동기 데이터를 쉽게 가져오고, React의 Suspense와 연계하여 사용할 수 있도록 도와주는 새로운 훅이다. 기존의 useState, useEffect처럼 상태를 관리하는 것이 아니라, 비동기 데이터를 동기적으로 사용할 수 있도록 설계된 기능이다.

 

✅ use 훅의 주요 기능

1. 비동기 데이터 가져오기
   • use 훅을 사용하면 fetch, async/await 등의 비동기 데이터를 동기적으로 처리할 수 있다.
2. Suspense와 함께 사용
   • use는 React의 Suspense 컴포넌트와 함께 사용되어, 데이터를 불러오는 동안 로딩 UI를 표시하는 데 유용하다.
3. 서버 컴포넌트에서 활용
   • 특히 React Server Components(RSC) 에서 use를 활용하면 서버에서 데이터를 받아오는 과정이 더 간단해진다.

🛠 use 훅 사용법

기본적으로 use는 Promise(프로미스) 객체를 받아서, 해당 프로미스가 해결될 때까지 Suspense를 통해 UI 렌더링을 제어한다.

 

import { use } from "react";

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Hello, React!"), 2000);
  });
}

const dataPromise = fetchData(); // 비동기 데이터

export default function MyComponent() {
  const data = use(dataPromise); // use 훅으로 데이터 가져오기

  return <h1>{data}</h1>; // 데이터가 로딩되면 렌더링됨
}

use(dataPromise) 를 사용하여, dataPromise가 해결될 때까지 컴포넌트가 Suspense 상태에 놓이게 된다.

 

🚀 use 훅 + Suspense 활용

use는 Suspense와 함께 사용될 때 더욱 효과적이다.

import { Suspense, use } from "react";

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Fetched Data!"), 3000);
  });
}

const dataPromise = fetchData();

function MyComponent() {
  const data = use(dataPromise);
  return <h1>{data}</h1>;
}

export default function App() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <MyComponent />
    </Suspense>
  );
}

Suspense의 fallback 속성을 이용해 로딩 UI를 표시하고, dataPromise가 해결되면 MyComponent가 렌더링된다.

 

🎯 use 훅 사용 시 주의할 점

1. 반드시 React 18 이상에서 사용 가능
   • use 훅은 React 18+ 버전에서만 동작
2. Client Components(클라이언트 컴포넌트)에서는 공식 지원되지 않음
   • 현재 use 훅은 주로 React Server Components(RSC) 에서 사용됨
3. Promise를 직접 전달해야 함
   • use는 일반 함수가 아닌 Promise 객체만 받을 수 있음

🏆 정리

✅ use 훅은 React 18에서 도입된 새로운 훅으로, 비동기 데이터를 쉽게 가져오고, Suspense와 함께 사용하여 더욱 효율적인 데이터 로딩을 가능하게 한다.
✅ 현재는 주로 서버 컴포넌트에서 사용되며, 클라이언트 컴포넌트에서는 공식적으로 지원되지 않는다.
✅ 기존의 useEffect + useState 패턴을 대체할 수 있는 새로운 접근 방식!