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

개발을 단순화하고 애플리케이션 성능을 향상시키는 풍부한 새로운 기능과 향상된 기능을 제공하는 React 19가 공식적으로 출시되었습니다. 향상된 상태 관리부터 향상된 서버측 통합까지 React 19는 모든 사람을 위한 기능을 제공합니다.

---

React 19의 주요 기능:

1. 단순화된 비동기 상태 관리를 위한 조치

API 요청과 같은 비동기 작업을 관리하는 것은 항상 React에서 일반적인 과제였습니다. React 19에는 보류 상태, 오류 처리 및 낙관적 업데이트를 자동화하는 Actions가 도입되었습니다.

예:

를 사용한 단순화된 양식 제출 조치

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는 이제