<div id="readability-page-1" class="page"><div>
 <div id="SE-bb7322f4-abb3-4481-9cdb-5ec9994368cb">
 지난 챕터에서 폼 제출을 깔끔하게 처리하는 법을 배웠습니다. 그런데 사용자 입장에서 보면, "보내기"를 누르고 서버 응답을 기다리는 그 1~2초가 답답합니다. 좋은 앱은 이 기다림을 숨깁니다. 메신저에서 메시지를 보내면 즉시 화면에 뜨고, 전송은 뒤에서 조용히 처리되죠. 이걸 낙관적 업데이트(optimistic update)라고 합니다. "성공할 거라고 낙관하고, 응답을 기다리지 않고 결과를 먼저 보여준다"는 뜻입니다.
​
이번 챕터에서는 React 19의 useOptimistic으로 이걸 구현하고, 덤으로 비동기 값과 context를 읽는 새로운 use() API도 맛봅니다.
​
​
useOptimistic — 응답을 기다리지 않고 먼저 보여주기
메시지를 보내는 화면을 만들어봅시다. 핵심은 보낸 즉시 화면에 띄우고(전송 중 표시와 함께), 서버가 확인하면 진짜 메시지로 바꾸는 것입니다.

 </div> <div id="SE-f3503f3b-54bb-4bd8-9a0f-470bb2c35801">
 import { useOptimistic } from 'react';

type Message = { id: string; text: string; sending?: boolean };

function Thread({
 messages,
 sendMessageAction,
}: {
 messages: Message[];
 sendMessageAction: (text: string) =&gt; Promise&lt;void&gt;;
}) {
 // 낙관적 상태 — 실제 messages에 "전송 중" 메시지를 얹어서 보여준다
 const [optimisticMessages, addOptimistic] = useOptimistic(
 messages,
 (current, newText: string): Message[] =&gt; [
 ...current,
 { id: crypto.randomUUID(), text: newText, sending: true },
 ],
 );

 async function formAction(formData: FormData) {
 const text = formData.get('text') as string;
 addOptimistic(text); // ① 즉시 화면에 추가 (sending: true)
 await sendMessageAction(text); // ② 서버 전송 — 시간이 걸린다
 // ③ 완료되면 부모의 진짜 messages가 갱신되어 낙관적 상태가 실제 값으로 수렴
 }

 return (
 &lt;form action={formAction}&gt;
 &lt;ul&gt;
 {optimisticMessages.map((m) =&gt; (
 &lt;li key={m.id}&gt;
 {m.text} {m.sending &amp;&amp; &lt;small&gt;(전송 중…)&lt;/small&gt;}
 &lt;/li&gt;
 ))}
 &lt;/ul&gt;
 &lt;input name="text" /&gt;
 &lt;button type="submit"&gt;보내기&lt;/button&gt;
 &lt;/form&gt;
 );
}
 </div> <div id="SE-5beb04fb-65df-4b4c-b42d-84c3f681e3d3">
 "보내기"를 누르면 입력한 메시지가 그 즉시 목록에 "(전송 중…)"과 함께 뜹니다. 서버 응답을 기다리지 않고요. 전송이 끝나 부모가 진짜 messages를 갱신하면, "전송 중" 딱지가 사라지고 확정된 메시지로 바뀝니다.
 </div> <div id="SE-a36078ea-913a-4328-99ba-27613ca55e91">
 const [optimisticState, addOptimistic] = useOptimistic(value, reducer?);
 </div> <div id="SE-b820d1ea-b26f-44bb-af75-8225cada0e3a">
 <ul><li>value — 진행 중인 Action이 없을 때 보여줄 실제 값. 위에서는 부모가 준 messages입니다.
</li><li>reducer(현재상태, 추가값) — 낙관적 값을 실제 값에 어떻게 얹을지 정하는 함수. 위에서는 "현재 목록 + 전송 중 메시지"를 반환했죠.
</li><li>반환된 optimisticState — 평소엔 value와 같다가, Action이 진행 중일 때만 reducer가 만든 낙관적 값이 됩니다.
</li><li>반환된 addOptimistic — 낙관적 업데이트를 트리거하는 함수.
</li></ul>​
⚠️ addOptimistic은 반드시 Action 안에서 불러야 합니다. 즉 &lt;form action&gt; 안이나 startTransition 안에서요. 그냥 이벤트 핸들러에서 부르면 낙관적 값이 잠깐 떴다가 곧장 사라집니다. (위 예제는 formAction이 &lt;form action&gt;에 연결되어 있어 자동으로 Action 안입니다.)

 </div> <div id="SE-96aef177-11a7-489b-bf7c-ec2ce2b30309">
 ​
useOptimistic의 가장 우아한 점은 실패 처리입니다. 만약 sendMessageAction이 에러를 던지면 어떻게 될까요?
​
낙관적 상태는 어디까지나 임시입니다. Action이 끝나면 React는 낙관적 값을 버리고 실제 value(부모의 messages)로 되돌아갑니다. 그런데 전송이 실패했다면 부모는 보통 messages를 갱신하지 않겠죠. 그러면 방금 낙관적으로 추가했던 메시지가 화면에서 자동으로 사라집니다. 우리가 "실패했으니 방금 그 메시지를 지워라" 같은 코드를 한 줄도 안 썼는데도요.

 </div> <div id="SE-401d9a9f-34d1-4dac-afa9-2a6b85e5b258">
 async function formAction(formData: FormData) {
 const text = formData.get('text') as string;
 addOptimistic(text);
 try {
 await sendMessageAction(text);
 } catch {
 showToast('전송에 실패했습니다.'); // 에러 알림만 띄우면 된다
 // 낙관적 메시지는 Action이 끝나며 알아서 사라진다 (롤백)
 }
}
 </div> <div id="SE-b2922f85-4c62-4259-b8db-4221881e9ea2">
 이게 옛날 방식과의 결정적 차이입니다. 예전에는 "임시로 추가했다가, 성공하면 확정하고, 실패하면 직접 제거"하는 로직을 손으로 다 짰습니다. useOptimistic은 "먼저 보여주기"만 선언하면, 확정과 롤백은 React가 처리합니다.
 </div> <div id="SE-fe18e4a2-eea3-4a87-ae22-0acdade48056">
 use() — 조건문 안에서도 부를 수 있는 특별한 함수
 </div> <div id="SE-0a446d83-3f0e-43d7-8e1c-7318ecd5779c">
 ​
React 19에는 use()라는 새 API도 있습니다. 이름이 use로 시작하지만 훅이 아닙니다. 그래서 훅과 달리 조건문이나 반복문 안에서도 호출할 수 있습니다. 두 가지 용도가 있습니다.
​
​
① context 읽기 — useContext보다 유연하게
useContext는 훅이라 항상 컴포넌트 최상위에서 불러야 했습니다. use(Context)는 그 제약이 없습니다.

 </div> <div id="SE-164b39c0-014b-4cf2-9839-03008a54fb9d">
 import { use } from 'react';

function Heading({ children }: { children: React.ReactNode }) {
 if (children == null) {
 return null; // 일찍 반환
 }

 // ✅ use는 조건문(early return) 뒤에서도 호출 가능 — useContext라면 불가능
 const theme = use(ThemeContext);
 return &lt;h1 className={theme}&gt;{children}&lt;/h1&gt;;
}
 </div> <div id="SE-a0a0d4a5-b026-468f-9326-6b1c47c55b24">
 ​
​
② Promise 읽기 — Suspense와 함께
use()에 Promise를 넘기면, 그 Promise가 끝날 때까지 컴포넌트를 "중단(suspend)"시켰다가, 값이 준비되면 이어서 렌더합니다. 이때 기다리는 동안 보여줄 화면은 &lt;Suspense&gt;가 담당합니다.

 </div> <div id="SE-551d0e06-b8e9-4f81-8fd1-0d497041b741">
 import { use, Suspense } from 'react';

function PokemonName({ pokemonPromise }: { pokemonPromise: Promise&lt;Pokemon&gt; }) {
 const pokemon = use(pokemonPromise); // resolve될 때까지 중단
 return &lt;h2&gt;{pokemon.name}&lt;/h2&gt;;
}

function App() {
 return (
 // 기다리는 동안 fallback을 보여준다
 &lt;Suspense fallback={&lt;p&gt;불러오는 중…&lt;/p&gt;}&gt;
 &lt;PokemonName pokemonPromise={fetchPokemon(25)} /&gt;
 &lt;/Suspense&gt;
 );
}
 </div> <div id="SE-2a696e4f-d6c3-4649-98f8-de57e034e1eb">
 PokemonName은 if (loading) return ... 같은 로딩 분기를 직접 쓰지 않습니다. 로딩 화면은 &lt;Suspense&gt;에게 맡기고, 컴포넌트는 "값이 있다"는 전제로 깔끔하게 작성되죠. 이게 Suspense 기반 데이터 로딩의 그림입니다.
​
⚠️ Promise는 렌더링 중에 만들면 안 됩니다. 위에서 fetchPokemon(25)를 App의 렌더 안에서 호출했는데, 이러면 렌더할 때마다 새 Promise가 생겨 무한 루프에 빠질 수 있습니다. 실제로는 Promise를 캐시하거나, Next.js 같은 프레임워크가 관리하는 방식으로 전달해야 합니다. 그래서 use(promise)는 보통 프레임워크와 함께 쓰는, 입문 단계에서는 "이런 게 있다" 정도로만 알아두면 되는 기능입니다. 반면 use(context)는 지금 바로 쓸 수 있습니다.

 </div> <div id="SE-dc2e2859-5cfa-4a97-87e7-92213ec02f6a">
 ​
<ul><li>useOptimistic은 서버 응답을 기다리지 않고 결과를 먼저 보여줍니다(낙관적 업데이트). 메신저의 "즉시 뜨는 메시지" 같은 UX를 만든다.
</li><li>const [optimisticState, addOptimistic] = useOptimistic(value, reducer) — optimisticState는 평소엔 실제 value, Action 중엔 낙관적 값.
</li><li>addOptimistic은 반드시 Action 안(&lt;form action&gt; 또는 startTransition)에서 호출한다.
</li><li>실패하면 자동으로 롤백된다. 낙관적 상태는 임시라, Action이 끝나면 실제 value로 수렴한다. 직접 되돌리는 코드가 필요 없다.
</li><li>use()는 훅이 아니라서 조건문 안에서도 호출할 수 있다. use(context)로 context를 유연하게 읽고, use(promise)로 비동기 값을 읽어 &lt;Suspense&gt;와 함께 로딩을 처리한다.
</li><li>use(promise)의 Promise는 렌더 중에 만들지 말고 캐시·프레임워크가 관리하도록 한다.
</li></ul>​
5부도 거의 끝나갑니다. 폼·낙관적 업데이트처럼 "데이터를 다루는" 신기능을 봤으니, 다음 챕터에서는 "렌더링 성능"을 다루는 신기능 — useTransition, useDeferredValue, useId — 을 배웁니다. 흥미롭게도 이 훅들은 React Compiler도 대신해주지 못하는 영역입니다.

 </div> <div id="SE-5a2de22f-9faf-49e0-8668-5e9996701614">
 ​
<ul><li>useOptimistic — React 공식 문서 (확인: 2026-06-14)
</li><li>use — React 공식 문서 (확인: 2026-06-14)
</li><li>Suspense — React 공식 문서 (확인: 2026-06-14)
</li></ul>
 </div> </div></div>

개발하는 기획자. 기획하는 개발자.

지난 챕터에서 폼 제출을 깔끔하게 처리하는 법을 배웠습니다. 그런데 사용자 입장에서 보면, "보내기"를 누르고 서버 응답을 기다리는 그 1~2초가 답답합니다. 좋은 앱은 이 기다림을 숨깁니다. 메신저에서 메시지를 보내면 즉시 화면에 뜨고, 전송은 뒤에서 조용히 처리되죠. 이걸 낙관적 업데이트(optimistic update)라고 합니다. "성공할 거라고 낙관하고, 응답을 기다리지 않고 결과를 먼저 보여준다"는 뜻입니다. 이번 챕터에서는 React 19의 useOptimistic으로 이걸 구현하고, 덤으로 비동기 값과 context를 읽는 새로운 use() API도 맛봅니다. useOptimistic — 응답을 기다리지 않고 먼저 보여주기 메시지를 보내는.......

낙관적 업데이트와 use() API — useOptimistic

댓글