[React] 리액트 19 업데이트 내용 톺아보기

2024년 12월 React 19의 stable 버전이 출시됐다. 리액트 공식 블로그를 참고해서 React 19의 주요 변경 사항을 정리해 봤다. 새롭게 선보인 훅은 각종 문서와 예제를 참고해서 이해하기 쉽도록 부연 설명을 덧붙였다.

 

공식문서에 기존 사용자를 위한 마이그레이션 가이드도 자세하게 나와있으니 참고하자.

 

 

useTransition

---

useTransition은 주로 무거운 작업의 상태 업데이트를 낮은 우선순위로 지정하여 UI 블로킹을 방지할 때 사용한다. React 18 버전까지 startTransition 콜백은 항상 동기적이어야 하는 제약이 있었다. 때문에 콜백 안에서 비동기 호출 같은 작업을 수행할 수 없었다.

 

React 19부턴 startTransition 콜백 안에서 비동기 처리도 가능해졌다. 덕분에 별도 상태를 정의하지 않고도 useTransition 훅이 반환하는 isPending을 이용해 로딩 상태까지 처리할 수 있게 됐다.

// 코드 출처: 리액트 공식 문서
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      // ...
    });
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      {/* updateName 비동기 호출이 시작되면 isPending = true */}
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

 

 

useActionState

---

useFormState 훅은 deprecated 됐다.

 

useActionState는 비동기 상태 관리를 단순화하기 위해 설계된 훅으로, 여러 상태 관리 단계를 하나의 통합된 액션으로 묶어준다. 이를 통해 비동기 로직을 명확하게 분리하고, 상태 관리의 복잡성을 줄여서 코드를 더욱 간결하게 작성할 수 있다.

useActionState(action, initialState, permalink?)

 

// 폼 제출 혹은 버튼을 눌렀을 때 호출할 함수(액션)
async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  // state: 첫 렌더링에선 initialState, 액션 실행 후부턴 액션(increment 함수) 반환값
  // formAction: form.action 혹은 button.formAction에 전달할 수 있는 래핑된 액션
  const [state, formAction] = useActionState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}

 

아래 예시에서 폼을 제출하면 useActionState 훅 첫 번째 인자로 전달한 함수(액션)가 실행되고, 해당 함수의 2번째 인자를 통해 FormData 객체가 전달된다. 이때 액션이 처리 중임을 알리는 isPending 상태는 true로 변경된다.

function ChangeName({ name, setName }) {
  // 초기 상태를 null로 설정했으므로 error의 초기값 역시 null
  const [error, submitAction, isPending] = useActionState(
    // 비동기 로직을 처리하는 액션 (useActionState 훅 첫번째 파라미터)
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) return error; // 요청 실패 시 에러 메시지 반환

      // 성공 처리
      redirect("/path");
      return null;
    },
    null, // 초기 상태 (useActionState 훅 두번째 파라미터)
  );

  return (
    // useActionState 훅이 반환하는 래핑된 액션을 action 속성에 할당
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

 

액션(함수)은 actions/ 같은 폴더를 만들어서 별도로 관리하는 것이 좋다.

 

한편 리액트 <form> 컴포넌트의 action 속성은 URL 혹은 함수(액션)를 모두 지원한다. URL을 전달하면 브라우저 기본 폼 제출 동작에 따라 해당 URL로 요청이 전송된다.

 

함수를 전달했을 땐 브라우저 기본 폼 제출 동작을 생략하고 해당 함수를 호출한다. 이때 함수는 FormData 객체를 첫 번째 파라미터로 받고, HTTP 메서드는 method 프로퍼티와 관계없이 항상 POST 메서드로 처리된다. 참고로 <form> 태그의 method 속성 기본값은 get이다(MDN).

// CodeSandbox: https://codesandbox.io/p/sandbox/6ndp8g
export default function Search() {
  function search(formData) {
    const query = formData.get("query");
    // input에 값 입력 후 Search 버튼을 누르면 입력한 값 콘솔 출력
    console.log(`You searched for '${query}'`);
  }
  return (
    <form action={search}>
      <input name="query" />
      <button type="submit">Search</button>
    </form>
  );
}

 

useActionState 훅이 반환하는 래핑 된 액션을 action 속성에 할당했을 때와, 일반 액션을 할당했을 때 각 액션 함수의 파라미터가 다른 점에 주의하자.

 

 

useFormStatus

---

useFormStatus는 마지막 폼 제출에 대한 정보를 조회할 때 사용하는 훅이다. 이 훅을 사용하면 Context API를 사용하지 않고도 부모 <form>의 상태를 직접 조회할 수 있다. 따라서 폼 정보를 참조하기 위해 별도로 props drilling을 할 필요가 없어진다.

// UsernameForm.js
import { useFormStatus } from "react-dom";

export default function UsernameForm() {
  // pending: 폼 제출중 여부를 나타내는 불리언 값. 제출중일 땐 true
  // data: 상위 <form>이 제출하고 있는 데이터를 담은 FormData.
  // 제출중인 폼이 없거나 상위에 <form>이 없으면 null
  const { pending, data } = useFormStatus();

  return (
    <div>
      <h3>Request a Username: </h3>
      <input type="text" name="username" disabled={pending} />
      <button type="submit" disabled={pending}>
        Submit
      </button>
      <br />
      <p>{data ? `Requesting ${data?.get("username")}...` : ""}</p>
    </div>
  );
}

// App.js
// CodeSandbox: https://codesandbox.io/p/sandbox/4zcn6k
import UsernameForm from "./UsernameForm";
import { submitForm } from "./actions.js";
import { useRef } from "react";

export default function App() {
  const ref = useRef(null);
  return (
    <form
      ref={ref}
      action={async (formData) => {
        await submitForm(formData); // Promise를 이용해 2초간 wait
        ref.current.reset(); // 폼 초기화
      }}
    >
      <UsernameForm />
    </form>
  );
}

 

useFormStatus 훅은 아래 status 객체를 반환한다.

• pending: 상위 폼이 제출 중인지 나타내는 불리언 값. 제출 중일 때 true.
• data: 제출 중인 상위 폼의 FormData 객체. 제출 중인 폼이 없거나 상위 폼이 없으면 null.
• method: 상위 폼의 HTTP 메서드('get' 혹은 'post').
• action: 상위 폼 action 속성에 전달한 함수의 레퍼런스. URI 문자열이거나 상위 폼이 없으면 null.

 

useFormStatus는 오직 상위 <form>에 대한 상태 정보만 반환한다. 동일한 컴포넌트나 자식 컴포넌트에서 렌더링 한 <form>의 상태 정보는 반환하지 않으므로 주의하자.

function Form() {
  // <form>과 동일한 컴포넌트에서 useFormStatus 훅을 사용했으므로 상태 정보를 반환하지 않는다.
  // 따라서 pending 값은 항상 false
  const { pending } = useFormStatus();
  return <form action={submit}></form>;
}

 

 

useOptimistic

---

낙관적 업데이트는 사용자가 요청한 작업을 서버에서 성공적으로 처리할 것으로 가정하고, 서버 응답을 기다리지 않고 UI를 즉시 업데이트하는 방식이다. 이를 통해 사용자는 더 빠른 피드백을 받을 수 있다. 서버 응답이 성공하면 업데이트를 유지하고, 실패하면 롤백하여 원래 상태로 복원한다. useOptimistic 훅을 이용하면 이러한 낙관적 업데이트를 더욱 쉽게 구현할 수 있다.

 

useOptimistic(state, [updateFn])

→ state: 낙관적 업데이트가 이루어지기 전 초기 상태
→ updateFn(currentState, optimisticValue): 낙관적 업데이트를 처리하는 순수 함수. state가 단순한 값일 경우 updateFn을 따로 정의하지 않아도 무방(useState의 상태 설정 함수와 유사)

 

아래 예제에서 사용자가 폼을 제출하여 updateName 요청을 보내는 동안 optimisticName 값을 즉시 렌더링한다. 요청이 완료되거나 오류가 발생하면 React는 자동으로 currentName 값으로 상태를 전환한다.

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

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName); // 입력한 값으로 낙관적 업데이트 후 즉시 렌더링
    const updatedName = await updateName(newName); // 비동기 호출(이라고 가정)
    onUpdateName(updatedName); // 비동기 호출 성공 후 액션 수행
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          // 서버 응답 대기 중일 땐 입력 방지
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

 

아래는 공식 문서에서 제공한 코드를 일부 수정한 예제. useOptimistic 훅을 통한 낙관적 업데이트는 아래 단계를 통해 진행된다.

 

①Input 필드에 값 입력 후 Send 버튼 클릭 ②입력한 값으로 낙관적 업데이트 후 렌더링 ③sendMessage 요청 성공 후 <App /> 부모 컴포넌트에서 messages 상태 업데이트 ④<Thread /> 자식 컴포넌트에서 업데이트된 messages 상태를 받아 리렌더링 되고, messages 상태는 useOptimistic 훅으로 전달 ⑤훅 내부에서 기존 낙관적 상태(optimisticMessages)를 업데이트된 messages 값으로 교체(동기화) → ⑥리렌더링

// CodeSandbox: https://codesandbox.io/p/sandbox/react-dev-forked-hnxdnv

import { useOptimistic, useState, useRef } from "react";
import { deliverMessage } from "./actions.js";

const createMessage = (text, sending = false) => ({ text, sending });

function Thread({ messages, sendMessage }) {
  const formRef = useRef();

  async function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    await sendMessage(formData);
  }

  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [...state, createMessage(newMessage, true)],
  );

  // 첫 렌더링: true
  // 요청(sendMessage) 진행 중: false
  // 요청(sendMessage) 완료 후: false
  // 낙관적 상태를 새로운 messages 값으로 교체 후: true
  console.log(messages === optimisticMessages);

  return (
    <>
      {optimisticMessages.map(({ text, sending }, index) => (
        <div key={index}>
          {text}
          {sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

export default function App() {
  const [messages, setMessages] = useState([createMessage("Hello There!")]);

  async function sendMessage(formData) {
    // 1초 대기 후 인자로 전달받은 값을 반환하는 Fake API
    const sentMessage = await deliverMessage(formData.get("message"));
    // 아래 코드를 주석 처리하면 낙관적 상태를 사용했다가 다시 원래 messages 상태로 롤백된다
    setMessages((messages) => [...messages, createMessage(sentMessage)]);
  }

  return <Thread messages={messages} sendMessage={sendMessage} />;
}

 

 

use

---

use는 Promise, Context 같은 리소스를 읽을 수 있는 API다. 항상 컴포넌트의 최상위에서 사용해야 했던 리액트 Hook과 달리 use는 if 같은 조건문이나 반복문 안에서 호출할 수 있으며, Suspense/Error Boundary와 함께 사용할 수 있다.

 

use는 컴포넌트, 훅 안에서만 호출할 수 있고 try-catch 블록에선 호출할 수 없는 제약이 있다. 대신 ErrorBoundary로 감싸거나 promise.catch 후속 메서드를 사용해야 한다.

import { use } from "react";

function Comments({ commentsPromise }) {
  // 프로미스가 resolve될 때까지 컴포넌트 지연
  const comments = use(commentsPromise);
  return comments.map((comment) => <p key={comment.id}>{comment}</p>);
}

function Page({ commentsPromise }) {
  // use를 호출하는 컴포넌트를 Suspense로 감싸면 프로미스가 resolve될 때까지 fallback 표시
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

 

Early Return은 조건을 만족하면 즉시 반환하여 이후 코드를 실행하지 않는 패턴이다. 리액트 Hook은 조건부 호출이 불가능한 규칙 때문에 아래와 같은 Early Return 뒤에 사용할 수 없다.

import ThemeContext from "./ThemeContext";

function Heading({ children }) {
  if (!children) return null; // Early return

  const theme = useContext(ThemeContext); // ❌ 오류!

  // ...
}

 

반면, use 훅은 조건부 호출이 가능하므로 아래처럼 Early Return 뒤에서도 사용할 수 있다.

import ThemeContext from "./ThemeContext";

function Heading({ children }) {
  if (!children) return null; // Early return

  const theme = use(ThemeContext); // ✅ OK

  // ...
}

 

서버 컴포넌트에서 프로미스(Promise)를 생성한 후 Prop으로 클라이언트 컴포넌트에 전달하면, 서버에서 클라이언트로 데이터를 스트리밍 할 수 있다. 클라이언트 컴포넌트에선 렌더링 할 때마다 프로미스가 다시 생성되기 때문에 서버 컴포넌트에서 프로미스를 생성하고 전달하는 방식을 더 권장하고 있다(참고).

스트리밍: 데이터를 조각(청크) 단위로 전송해서, 전체 데이터가 완전히 준비되지 않아도 점진적으로 소비할 수 있는 방식.

 

아래 예시에서 <Message /> 컴포넌트를 Suspense가 감싸고 있으므로 프로미스가 resolve 될 때까지 fallback을 표시한다. fetchMessage 함수를 호출하면 서버 요청이 시작되고, 반환된 프로미스는 클라이언트 컴포넌트로 전달된다. 서버는 데이터를 청크 단위로 스트리밍 하고, 클라이언트 컴포넌트가 데이터를 모두 수신해서 프로미스가 resolve 되면, use 훅을 통해 값을 참조하여 렌더링 한다(참고).

// App.js 서버 컴포넌트
import { fetchMessage } from './lib.js';
import { Message } from './message.js';

export default function App() {
  const messagePromise = fetchMessage();
  return (
    <Suspense fallback={<p>waiting for message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

// message.js 클라이언트 컴포넌트
'use client';

import { use } from 'react';

export function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Here is the message: {messageContent}</p>;
}

 

서버 컴포넌트에서 클라이언트 컴포넌트로 프로미스를 전달할 때, 프로미스가 resolve 할 값은 반드시 직렬화할 수 있어야 한다. 예를 들어 함수는 직렬화할 수 없으므로 프로미스의 resolve 값으로 사용할 수 없다.

 

한편, 서버 컴포넌트에서 await를 사용하여 프로미스를 resolve 한 데이터를 클라이언트 컴포넌트로 전달하는 방법도 있지만, await문을 완료할 때까지 렌더링이 차단되는 단점이 있다.

 

 

Server Components

---

￭ 서버 컴포넌트는 서버에서 한 번만 렌더링 된다(리렌더링 없음).
￭ 클라이언트 컴포넌트는 서버/클라이언트 양쪽에서 렌더링 된다.
￭ 클라이언트 컴포넌트는 JS 번들에 포함된다.
￭ 서버 컴포넌트에선 useState, useEffect 같은 클라이언트 훅을 사용할 수 없다.
￭ 서버 컴포넌트에 async를 붙여서 비동기로 동작하도록 만들 수 있다.

 

서버 컴포넌트는 클라이언트 애플리케이션이나 SSR 서버와 분리된 환경에서 번들링 전에 컴포넌트를 미리 렌더링 할 수 있는 기능이다. 서버 컴포넌트는 CI 서버에서 빌드 타임에 한 번 실행되거나, 웹 서버를 통해 각 요청마다 실행될 수 있다.

 

React 19에서 서버 컴포넌트가 기본값이기 때문에 아무런 지시문이 없으면 서버 컴포넌트가 된다. 파일 최상단에 'use client' 지시문을 추가하면 클라이언트 컴포넌트가 된다(클라이언트에서 코드 실행). 'use server' 지시문는 클라이언트에서 호출할 수 있는 서버 함수를 지정할 때 사용한다.

 

Server Components without a Server

만약 클라이언트에 제공할 콘텐츠가 정적이거나 파일 시스템에서 불러올 수 있다면 서버 컴포넌트를 이용해 빌드 타임에 처리할 수 있다. 이 경우 별도의 웹 서버는 필요하지 않다.

 

만약 클라이언트 컴포넌트라면 useEffect 안에서 정적 데이터를 가져오기 위한 API 호출이 필요하고, marked 같은 라이브러리를 추가적으로 다운로드한 뒤 콘텐츠를 파싱 하는 작업이 필요하다.

// bundle.js
import marked from "marked"; // 35.9K (11.2K gzipped)
import sanitizeHtml from "sanitize-html"; // 206K (63.3K gzipped)

function Page({ page }) {
  const [content, setContent] = useState("");
  // 첫 페이지 렌더링 이후에 데이터 로드
  useEffect(() => {
    fetch(`/api/content/${page}`).then((data) => {
      setContent(data.content);
    });
  }, [page]);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

 

서버 컴포넌트를 사용하면 이러한 작업을 빌드 타임에 처리하여 정적 콘텐츠를 한 번만 렌더링 하고 클라이언트로 전달할 수 있다. 렌더링 결과는 SSR을 통해 HTML로 변환해서 CDN에 업로드할 수도 있다.

import marked from 'marked'; // 번들에 포함 안됨
import sanitizeHtml from 'sanitize-html'; // 번들에 포함 안됨

async function Page({page}) {
  // 애플리케이션이 빌드될 때 렌더링 도중에 데이터 로드
  const content = await file.readFile(`${page}.md`);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

 

위처럼 서버 컴포넌트를 사용하면 렌더링에 필요한 무거운 라이브러리가 번들에 포함되지 않기 때문에 번들 크기가 줄어들어 로드 시간을 단축할 수 있다.

초기 HTML을 생성하려면 여전히 SSR에 의존해야 한다. 서버 컴포넌트는 서버에서 실행하여 렌더링 한 리액트 엘리먼트를 JSON 형식으로 직렬화하여 클라이언트로 전달하며, 클라이언트는 이 데이터를 받아 HTML을 생성하거나 업데이트한다.

 

Server Components with a Server

서버 컴포넌트는 웹 서버에서 실행되어 데이터베이스 같은 서버 측 리소스에 직접 접근할 수 있으므로, 별도의 API 엔드포인트를 만들지 않아도 된다. 서버에서 렌더링 된 JSX(UI)와 데이터를 클라이언트 컴포넌트의 Props로 전달하면, 클라이언트는 추가 작업 없이 화면에 렌더링 할 수 있다.

import db from "./database";

async function Note({ id }) {
  // 렌더링 도중에 데이터 로드
  const note = await db.notes.get(id);
  return (
    <div>
      <Author id={note.authorId} />
      <p>{note}</p>
    </div>
  );
}

async function Author({ id }) {
  // <Note /> 이후에 데이터 로드
  // 데이터가 같은 위치(co-located)에 있다면 더 빠르게 로드
  const author = await db.authors.get(id);
  return <span>By: {author.name}</span>;
}

 

서버 컴포넌트는 렌더링 도중 필요한 데이터를 가져오고, 동적인 클라이언트 컴포넌트와 결합하여 최적화된 번들을 생성한다. 이 과정에서 SSR을 사용해 페이지의 초기 HTML을 생성할 수도 있다.

 

이처럼 서버 컴포넌트는 서버에서 실행돼서 렌더링 한 결과만 클라이언트로 전달하므로, 서버 컴포넌트의 구조나 코드는 클라이언트에 노출되지 않는다.

 

Adding interactivity to Server Components

서버 컴포넌트는 브라우저에서 실행되지 않으므로 상태 관리나 이벤트 처리 같은 기능을 포함할 수 없다. 사용자 상호작용을 처리하려면, 서버 컴포넌트에서 상호작용 코드를 포함한 클라이언트 컴포넌트를 불러오는 방식으로 구현해야 한다.

 

아래 예시에서 Notes는 서버 컴포넌트이므로 서버에서만 실행되고 번들에는 포함되지 않는다. 반면, 클라이언트 컴포넌트는 브라우저에서 실행시켜야 하므로, 번들러는 Expandable 컴포넌트를 bundle.js 자바스크립트 번들 파일에 포함시킨다.

// Server Component
import Expandable from "./Expandable";

async function Notes() {
  const notes = await db.notes.getAll();

  return (
    <div>
      {notes.map((note) => (
        <Expandable key={note.id}>
          <p>{note.content}</p>
        </Expandable>
      ))}
    </div>
  );
}

// Client Component
"use client";

export default function Expandable({ children }) {
  const [expanded, setExpanded] = useState(false);
  const toggle = () => setExpanded((prev) => !prev);

  return (
    <div>
      <button onClick={toggle}>Toggle</button>
      {expanded && children}
    </div>
  );
}

 

브라우저는 서버에서 생성된 출력을 받아 화면에 렌더링 한 후, 클라이언트 컴포넌트 번들을 다운받아 실행한다. 클라이언트 컴포넌트가 활성화되면, Expandable 컴포넌트는 서버 컴포넌트의 출력을 Prop으로 전달받아 상호작용을 처리하고 상태에 따라 UI를 업데이트한다.

<head>
  <!-- 클라이언트 컴포넌트 번들 -->
  <script src="bundle.js"></script>
</head>
<body>
  <!-- 서버에서 생성된 초기 출력 -->
  <div>
    <div>
      <button>Toggle</button>
      <!-- 클라이언트에서 렌더링할 children 영역 -->
    </div>
    <div>
      <button>Toggle</button>
      <!-- 클라이언트에서 렌더링할 children 영역 -->
    </div>
  </div>
</body>

 

 

Server Actions

---

서버 함수를 action 속성에 전달하거나 action 내부에서 호출하면 서버 액션이라고 부른다.

 

서버 액션은 클라이언트에서 서버에 있는 비동기 함수를 호출할 수 있는 기능으로, 클라이언트는 서버 액션의 결과만 받아서 UI를 업데이트할 수 있다. 서버 액션을 사용하면 클라이언트와 서버 간의 작업을 명확히 분리할 수 있고, 보안이 중요한 데이터나 로직을 서버에서 처리할 수 있는 장점이 있다.

 

서버 함수는 'use server' 지시어로 정의한다. 서버 함수는 서버에서만 실행되므로 클라이언트 컴포넌트에선 정의할 수 없다. 대신 서버 컴포넌트에서 정의한 서버 함수를 클라이언트 컴포넌트에서 import 하거나 Prop으로 받아서 사용할 수 있다.

import Button from "./Button"; // Button 클라이언트 컴포넌트

// EmptyNote 서버 컴포넌트
function EmptyNote() {
  async function createNote() {
    // 서버 함수 (클라이언트에서 버튼 클릭시 서버에서 createNote 함수 실행)
    "use server";
    await db.notes.create();
  }

  return <Button onClick={createNote} />;
}

 

파일 최상단에 'use server' 지시어를 사용하면 해당 파일에서 내보낸 모든 함수가 서버 함수로 정의된다.

"use server";

export async function createNote() {
  await db.notes.create();
}

 

서버 함수는 클라이언트 액션(클라이언트에서 실행되는 함수/로직)과 함께 구성하거나, <form />의 action 속성과 함께 동작할 수도 있다.

"use server";

export async function updateName(name) {
  if (!name) {
    return {error: 'Name is required'};
  }
  await db.users.updateName(name);
}

"use client";

import { updateName } from "./actions";

function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);

  const [isPending, startTransition] = useTransition();

  // 클라이언트 액션
  const submitAction = async () => {
    // startTransition 내부 작업이 시작될 때 isPending=true, 완료시 isPending=false
    startTransition(async () => {
      // 서버 함수 호출 (updateName 함수는 서버에서 처리되고 결과만 클라이언트로 반환)
      const { error } = await updateName(name);
      setError(error ?? "");
    });
  };

  return (
    <form action={submitAction}>
      <input type="text" name="name" disabled={isPending} />
      {state.error && <span>Failed: {state.error}</span>}
    </form>
  );
}

 

 

Improvements

---

deprecate(사용 중단) 예정인 API는 추후 공개할 codemode(마이그레이션 도구)를 통해 업데이트된 코드로 자동 변환할 수 있다.

 

ref as a prop

ref를 prop으로 넘길 수 있게 됐다. forwardRef() 함수는 deprecate 될 예정이다.

function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />;
}

 

Diffs for hydration errors

하이드레이션 에러가 발생했을 때 서버와 클라이언트가 일치하지 않는 부분을 단일 메시지와 함께 표시해 준다.

 

<Context> as a provider

createContext() 함수가 반환하는 Context를 Provider로 사용할 수 있게 됐다. <Context.Provider> 방식은 deprecate 될 예정이다.

const ThemeContext = createContext("");

function App({ children }) {
  return <ThemeContext value="dark">{children}</ThemeContext>;
}

 

Cleanup functions for refs

ref 콜백에서도 클린업 함수를 지원한다. 컴포넌트를 언마운트하면 ref 콜백에서 반환한 클린업 함수가 호출된다. 이러한 방식은 DOM ref, 클래스 컴포넌트 ref, useImperativeHandle() 에도 모두 적용된다.

<input
  ref={(ref) => {
    // ref 생성시 호출

    // 클린업 함수를 반환하면 DOM에서 엘리먼트가 제거될 때 ref를 reset 할 수 있음
    return () => {
      console.log("Ref cleanup:", ref);
    };
  }}
/>;

 

useDeferredValue initial value

useDeferredValue 두 번째 파라미터로 initialValue를 받을 수 있게 됐다. 컴포넌트 초기 렌더링엔 initialValue를 반환하고, 이후 백그라운드에서 deferredValue 값으로 리렌더링을 예약한다.

function Search({deferredValue}) {
  // 초기 렌더링 값은 '', 그 후 deferredValue 값으로 리렌더링 예약
  const value = useDeferredValue(deferredValue, '');

  return (
    <Results query={value} />
  );
}

 

Support for Document Metadata

리액트 19부터 컴포넌트 내에서 <title>, <link>, <meta> 같은 메타데이터 태그를 지원한다. 컴포넌트 내에서 정의한 메타데이터 태그는 도큐먼트의 <head> 영역으로 호이스팅 된다.

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="..." />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}

 

Support for stylesheets

컴포넌트 단위로 스타일시트(Stylesheets)를 관리할 수 있는 기능이 도입됐다. 이를 통해 스타일 우선순위를 지정하고, 스타일시트가 로드된 후 콘텐츠가 표시되도록 보장할 수 있다. CSS는 Cascading 규칙 때문에 스타일이 로드되는 순서가 중요하므로, React에서 이를 명확히 제어할 수 있도록 지원한다.

 

• 우선순위 관리: <link>의 precedence 속성을 통해 스타일 삽입 순서 제어
• 중복 방지: 동일한 스타일시트를 여러 곳에서 렌더링해도 DOM에 중복 삽입 안됨
• SSR: 서버에서 스타일시트를 <head>에 포함시켜 브라우저가 스타일 로드 후 콘텐츠를 렌더링 하도록 보장
• CSR: 스타일시트를 로드할 때까지 렌더링을 지연시켜 스타일 적용 보장.

 

function ComponentOne() {
  return (
    <Suspense fallback="loading...">
      {/* 우선순위가 높을수록 뒤에 삽입된다 */}
      <link rel="stylesheet" href="foo" precedence="default" />
      <link rel="stylesheet" href="bar" precedence="high" />
      <article class="foo-class bar-class">{/* ... */}</article>
    </Suspense>
  );
}

function ComponentTwo() {
  return (
    <div>
      <p>{/* ... */}</p>
      {/* 아래 스타일은 foo와 bar 스타일시트 사이에 삽입됨 */}
      <link rel="stylesheet" href="baz" precedence="default" />
    </div>
  );
}

 

Support for async scripts

defer 스크립트는 문서 로드를 완료한 뒤에 실행된다. 스트리밍 방식의 서버 컴포넌트는 defer와 호환되지 않으므로 async 스크립트를 사용해야 한다.

 

리액트 19부터 비동기 스크립트(async scripts)를 지원한다. 컴포넌트 트리 어디서든 스크립트를 렌더링 할 수 있고 중복 로드 없이 한 번만 실행된다(동일한 src면 중복 제거). SSR에서는 비동기 스크립트가 <head>에 포함되며, 스타일/폰트 등 페인트를 블로킹할 수 있는 중요한 리소스 보다 낮은 우선순위로 설정된다.

function MyComponent() {
  return (
    <div>
      <script async={true} src="..." />
      Hello World
    </div>
  );
}

function App() {
  return (
    <html>
      <body>
        <MyComponent />
        {/* 스크립트가 DOM에 중복으로 추가되지 않음 */}
        <MyComponent />
      </body>
    </html>
  );
}

 

Support for preloading resources

브라우저 리소스 로딩을 최적화하기 위한 다양한 API가 도입됐다. 폰트/스타일시트/스크립트 등의 리소스를 미리 로드하거나, 서버 연결을 사전에 설정하여 초기 로딩 속도와 페이지 성능을 개선할 수 있다.

import { prefetchDNS, preconnect, preload, preinit } from "react-dom";

function Component() {
  // 외부 스크립트를 미리 로드하고 즉시 실행 (다운로드/실행)
  preinit("https://.../path/to/some/script.js", { as: "script" });
  // 폰트 미리 다운로드
  preload("https://.../path/to/font.woff", { as: "font" });
  // 스타일시트 미리 다운로드
  preload("https://.../path/to/stylesheet.css", { as: "style" }); 
  // 리소스를 요청할 것으로 예상되는 도메인의 DNS 정보 미리 조회
  prefetchDNS("https://...");
  // 리소스를 요청할 것으로 예상되는 서버와의 연결을 미리 설정
  preconnect("https://...");
}

 

위 코드를 통해 아래와 같은 HTML이 자동으로 생성된다. link/script 태그의 로딩 우선순위는 코드 순서가 아닌, 브라우저의 로딩 효율성 기준에 따라 결정된다. 즉, 페이지 로딩 속도에 가장 큰 영향을 주는 리소스를 우선적으로 처리한다.

<html>
  <head>
    <!-- link/script는 코드 순서와 무관하게 로딩 효율성을 기준으로 처리 -->
    <link rel="prefetch-dns" href="https://...">
    <link rel="preconnect" href="https://...">
    <link rel="preload" as="font" href="https://.../path/to/font.woff">
    <link rel="preload" as="style" href="https://.../path/to/stylesheet.css">
    <script async="" src="https://.../path/to/some/script.js"></script>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

 

이를 활용하면 스타일시트 로딩에 의존하지 않고 리소스를 별도로 로드하여 초기 로딩 속도를 최적화할 수 있다.

 

• 기존 방식: HTML 파싱 → CSS 로드 → 폰트/이미지 발견 → 리소스 로드 시작
• 신규 방식: HTML 파싱 시점에 preload 선언이 있는 리소스 미리 로드 → 스타일 시트와 동시에 렌더링

 

또한, 사용자가 이동할 가능성이 높은 페이지의 리소스를 미리 가져오고(prefetch), 마우스 클릭 혹은 호버 했을 때 리소스를 즉시 로드(preload)하여 페이지 로딩 시간을 줄일 수 있다.

Preloading API에는 eagerly라는 단어가 자주 등장한다. eagerly는 사전적으로 "열심히, 간절히"라는 뜻이지만, 문맥상 "가능한 빠르게" 또는 "즉시" 정도로 해석할 수 있다.

 

Compatibility with third-party scripts and extensions

리액트 19부터 서드파티 스크립트나 브라우저 확장프로그램이 <head> 혹은 <body> 내부에 삽입한 태그를 건너뛰는 방식으로 하이드레이션 불일치 오류를 방지한다. 하이드레이션 문제가 발생했지만 서드파티 요소와 직접적인 관련이 없는 경우 리액트는 전체 문서를 다시 렌더링 할 때 서드파티 스타일시트를 그대로 유지함으로써 서드파티의 스타일과 기능이 손상되지 않도록 처리한다.

 

Better error reporting

에러 처리 방식이 개선되어 중복 에러 로그가 제거되고, caught, uncaught 에러 처리에 대한 새로운 옵션이 추가됐다. 이전 버전에선 Error Boundary에서 에러를 캐치했을 때 3개의 중복된 로그를 출력했었다.

 

1. 원본 에러 로그
2. 복구 실패로 발생한 동일한 에러
3. 에러 발생 위치를 포함한 console.error 메시지

 

리액트 19부턴 이러한 에러 로그를 단일 메시지로 통합하여 한 번에 모든 정보를 제공한다.

리액트 19 이전 버전의 에러 로그. 에러가 발생하면 총 3개의 로그를 출력한다.

리액트 19 버전의 에러 로그. 단일 메시지에 모든 에러 정보를 포함한다.

또한 createRoot, hydrateRoot 루트 생성 함수에 새로운 에러 관련 옵션이 추가됐다.

• onCaughtError: Error Boundary에서 에러를 캐치했을 때 호출
• onUncaughtError: Error Boundary로 캐치되지 않은 에러가 발생했을 때 호출
• onRecoverableError: 발생한 에러를 자동으로 복구했을 때 호출

 

Support for Custom Elements

￭ 어트리뷰트(Attribute): HTML 요소의 속성. 초기값을 지정하는 정적인 값.
￭ 프로퍼티(Property): DOM 객체의 속성. 현재 상태를 반영하는 동적인 값.

 

이전 버전의 리액트에선 표준 HTML 속성(value, className 등)이나 React 고유 속성(key, ref 등)이 아니면 모두 어트리뷰트로 취급했기 때문에 커스텀 엘리먼트를 사용하기 어려웠다. 데이터를 주고받을 땐 객체, 배열 같은 다양한 데이터 타입을 다룰 수 있는 프로퍼티를 주로 사용하지만, 어트리뷰트는 기본적으로 문자열만 허용하기 때문(문자열이 아닌 값을 할당하면 내부적으로 toString()을 호출해서 문자열로 자동 변환됨).

 

리액트 19 버전부턴 CSR 및 SSR에서 어트리뷰트와 프로퍼티를 적절히 처리할 수 있도록 개선됐다.

 

• SSR: 원시 타입이나 값이 true인 props는 어트리뷰트로 렌더링. 비원시타입이나 값이 false이면 생략.
• CSR: 커스텀 엘리먼트 인스턴스의 프로퍼티와 일치하는 props는 프로퍼티로, 그 외는 어트리뷰트로 설정.

 

 

레퍼런스

---

React v19 – React

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요