React v 안정 릴리스 및 새로운 기능

import { useActionState } from "react";

function UpdateNameForm() {
  const [error, submitAction, isPending] = useActionState(
    async (prevState, formData) => {
      const name = formData.get("name");
      const error = await updateName(name);
      if (error) {
        return error;
      }
      redirect("/profile");
      return null;
    },
    null
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

여기서 useActionState는 제출 상태와 오류 처리를 관리하여 코드를 더 깔끔하고 유지 관리하기 쉽게 만듭니다.

2. useOptimistic을 사용한 낙관적 업데이트

낙관적 UI 업데이트를 통해 사용자는 비동기 요청이 진행되는 동안 변경 사항을 즉시 확인할 수 있습니다. 새로운 사용Optimistic 후크를 사용하면 이 패턴이 간단해집니다.

예: 낙관적 이름 변경

import { useOptimistic } from "react";

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName); // Show optimistic state
    const updatedName = await updateName(newName); // Wait for the async request
    onUpdateName(updatedName); // Update the actual state
  };

  return (
    <form action={submitAction}>
      <p>Your name: {optimisticName}</p>
      <input type="text" name="name" />
      <button type="submit">Change Name</button>
    </form>
  );
}

useOptimistic은 서버가 응답하기 전에도 업데이트를 표시하여 원활한 사용자 경험을 보장합니다.

3. 수화 불일치에 대한 향상된 오류 보고

React 19는 특히 수화 오류에 대한 오류 처리를 개선합니다. 모호한 오류 대신 이제 서버와 클라이언트 간에 일치하지 않는 콘텐츠에 대한 자세한 차이점을 확인할 수 있습니다.

예: 수화 오류 차이

Uncaught Error: Hydration failed because the server-rendered HTML didn’t match the client.
Tree mismatch:
+ Client: <span>Welcome</span>
- Server: <span>Hello</span>

이러한 명확한 메시지는 개발자가 문제를 빠르고 효율적으로 디버그하는 데 도움이 됩니다.

4. 서버 구성 요소 및 서버 작업

React 서버 구성 요소(RSC)를 사용하면 구성 요소를 서버에서 렌더링하여 성능을 향상시킬 수 있습니다. 서버 작업을 사용하면 클라이언트 구성 요소에서 직접 서버의 비동기 기능을 호출할 수 있습니다.

예: 서버 작업 사용

// Server Component
export const fetchComments = async () => {
  const response = await fetch("/api/comments");
  return await response.json();
};

// Client Component
import { use } from "react";

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // Suspends until resolved
  return (
    <ul>
      {comments.map((comment) => (
        <li key={comment.id}>{comment.text}</li>
      ))}
    </ul>
  );
}

// Usage
function App() {
  return (
    <Suspense fallback={<p>Loading comments...</p>}>
      <Comments commentsPromise={fetchComments()} />
    </Suspense>
  );
}

서버 작업은 클라이언트 구성 요소 내에서 서버 측 데이터 가져오기 및 렌더링을 간소화합니다.

5. 기본 메타데이터 및 스타일시트 관리

React 19는 이제