React 19 New Hooks — 완전 튜토리얼 (2026 가이드)

Source: Dev.to

소개

React 19은 상태 관리, 비동기 워크플로, UI 반응성을 단순화하는 강력한 새로운 훅 세트를 도입합니다. useEffect, useState, 외부 라이브러리에 많이 의존해 왔다면, 이 새로운 훅들은 코드를 크게 정리할 수 있습니다. 아래는 각 훅에 대한 실용적이고 개발자 중심의 설명입니다.

use() — 게임 체인저

예시

import { use } from "react";

function UserProfile({ userPromise }) {
  const user = use(userPromise);

  return <>{user.name}</>;
}

왜 중요한가

• Suspense와 원활하게 작동합니다
• useEffect + useState를 결합하는 것보다 더 깔끔합니다

useFormStatus() — 폼 상태를 쉽게 만들기

예시

function SubmitButton() {
  return (
    // Your button UI here
    // e.g. Submit
  );
}

/* Typical usage patterns:
   - Signup flows
   - API submission UI
*/

useOptimistic() — 즉시 UI 업데이트

예시

function Comments({ comments, addComment }) {
  async function handleAdd(text) {
    // Optimistically update UI
    // e.g. setComments(prev => [...prev, { text }]);
  }

  return (
    <ul>
      {comments.map((c, i) => (
        <li key={i}>- {c.text}</li>
      ))}
    </ul>
  );
}

/* Common scenarios:
   - Chat apps
   - Likes
   - Comments
*/

useActionState() — 간소화된 비동기 액션

예시

async function loginAction(prevState, formData) {
  const res = await fetch("/api/login", {
    method: "POST",
    body: formData,
  });
  return res.ok ? { success: true } : { error: "Login failed" };
}

function LoginForm() {
  const [state, action] = useActionState(loginAction, { error: null });

  return (
    <form onSubmit={action}>
      {/* form fields */}
      {state.error && <p>{state.error}</p>}
    </form>
  );
}

/* Benefits:
   - Built‑in async flow handling
*/

useTransition() (개선됨)

예시

function Search() {
  const [isPending, startTransition] = useTransition();
  const [results, setResults] = useState([]);

  function handleSearch(query) {
    startTransition(() => {
      // Simulate a heavy filter operation
      const filtered = heavyFilter(query);
      setResults(filtered);
    });
  }

  return (
    <>
      <input onChange={e => handleSearch(e.target.value)} />
      {isPending && <p>Loading...</p>}
      {/* render results */}
    </>
  );
}

/* Ideal for:
   - Filtering large lists
   - Providing a smooth UX during expensive updates
*/

useDeferredValue() — 지연 없는 UI

예시

import { useDeferredValue, useMemo } from "react";

function Search({ query }) {
  const deferredQuery = useDeferredValue(query);

  // Use `deferredQuery` for expensive calculations
  const results = useMemo(() => heavySearch(deferredQuery), [deferredQuery]);

  return (
    <ul>
      {results.map(item => (
        <li key={item.id}>- {item.name}</li>
      ))}
    </ul>
  );
}

/* 성능을 향상시킵니다:
   - UI가 유휴 상태가 될 때까지 업데이트를 연기합니다
*/

Server Actions + Hooks (React 19 Power Combo)

React 19는 서버 액션을 여러 새로운 훅(useActionState, useFormStatus 등)과 결합하여 추가적인 useEffect 호출 없이 더 직접적인 데이터 처리를 가능하게 합니다.

• Less useEffect: 서버 액션은 데이터를 직접 가져오거나 변형할 수 있습니다.
• More direct data handling: 훅은 서버 액션의 상태를 즉시 노출합니다.
• Faster UI updates: 낙관적 및 비동기 패턴이 내장되어 있습니다.
• Built‑in async patterns: 외부 상태 라이브러리에 대한 의존성을 줄입니다.

언제 무엇을 사용할까

최종 생각

현대적인 앱을 구축하고 있다면—특히 Next.js와 함께—이 훅들을 마스터하면 다음과 같은 이점을 얻을 수 있습니다:

• 코드가 더 깔끔해짐
• 향상된 사용자 경험
• 외부 상태 관리 라이브러리에 대한 의존도 감소

이를 활용하여 보다 선언적이고, 성능이 뛰어나며, 유지보수가 쉬운 React 애플리케이션을 작성하세요.