React 19의 `use` 훅
1분 읽기
React 19의 use 훅
기본 개념
use는 Promise 또는 Context 값을 렌더 중에 직접 읽는 새로운 API입니다. 기존 훅과 달리 조건문·반복문 안에서도 호출 가능하다는 점이 가장 큰 특징입니다.
import { use, Suspense } from 'react';
function MessagesList({ messagesPromise }) {
const messages = use(messagesPromise); // Promise가 resolve될 때까지 suspend
return <ul>{messages.map(m => <li key={m.id}>{m.text}</li>)}</ul>;
}
function App({ messagesPromise }) {
return (
<Suspense fallback={<p>Loading...</p>}>
<MessagesList messagesPromise={messagesPromise} />
</Suspense>
);
}기존 데이터 페칭 방식과의 비교
| 항목 | useEffect + useState | use (React 19) |
|---|---|---|
| 위치 | 훅 규칙 엄격 적용 (조건문 불가) | 조건문·루프 안에서도 사용 가능 |
| 로딩 상태 | isLoading state를 직접 관리 | <Suspense> fallback이 자동 처리 |
| 에러 처리 | try/catch 또는 error state | <ErrorBoundary>가 담당 |
| 데이터 흐름 | 컴포넌트 내부에서 fetch 시작 | Promise를 props로 전달받아 읽음 |
| Server Component 연동 | 불가 | 서버에서 만든 Promise를 클라이언트로 스트리밍 가능 |
기존 방식 (useEffect)
function MessagesList() {
const [messages, setMessages] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
fetchMessages().then(data => {
setMessages(data);
setIsLoading(false);
});
}, []);
if (isLoading) return <p>Loading...</p>;
return <ul>{messages.map(m => <li key={m.id}>{m.text}</li>)}</ul>;
}use 방식 (React 19)
// 부모에서 Promise 생성 → 자식에서 use로 읽기
function Parent() {
const messagesPromise = fetchMessages(); // 렌더 중 Promise 생성
return (
<Suspense fallback={<p>Loading...</p>}>
<MessagesList messagesPromise={messagesPromise} />
</Suspense>
);
}
function MessagesList({ messagesPromise }) {
const messages = use(messagesPromise); // suspend → resolve 후 재개
return <ul>{messages.map(m => <li key={m.id}>{m.text}</li>)}</ul>;
}핵심 차이점 요약
- 로딩 상태 관리 불필요 —
isLoadingstate 없이<Suspense>가 처리 - 조건부 호출 가능 — 유일하게
if블록 안에서 호출할 수 있는 훅 - Promise는 컴포넌트 외부에서 생성 —
use는 Promise를 만들지 않고 읽기만 함 (렌더 중 직접 fetch 시작 금지) - Server → Client 스트리밍 — RSC에서 생성한 Promise를 그대로 클라이언트 컴포넌트에 전달 가능
주의: Promise를 렌더 함수 안에서 직접 생성하면 매 렌더마다 새 Promise가 만들어집니다.
use에 넘길 Promise는 state, ref, 또는 서버 컴포넌트의 props로 안정적으로 관리해야 합니다.
관련 글
3분 읽기
Context API는 상태 관리 도구인가?
Context API가 상태 관리 도구인지 살펴보고, Prop Drilling 해결을 위한 의존성 주입 도구로서의 역할과 사용 시 고려사항을 정리합니다.
4분 읽기
왜 리액트는 단방향 데이터 흐름을 채택했을까?
양방향·단방향 데이터 바인딩의 차이를 MVC 아키텍처의 한계와 함께 살펴보며, React가 단방향 데이터 흐름을 채택한 배경과 이유를 알아봅니다.
3분 읽기
Vite + TypeScript 환경에서 SVGR 사용하기: SVG-in-JS
Vite 환경에서 SVG를 리액트 컴포넌트로 사용하는 방법과 SVG 사용 방식별 트레이드오프를 정리합니다.