React19 업데이트 요약본

Actions

React 19에서는 비동기 데이터 변형과 상태 업데이트를 더 쉽게 관리할 수 있는 새로운 기능인 Actions를 도입했습니다. Actions는 보류 중인 상태, 오류 처리, 낙관적 업데이트를 자동으로 처리합니다.

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

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

새로운 훅: useActionState

Actions의 일반적인 경우를 쉽게 만들기 위해 새로운 훅 useActionState를 추가했습니다.

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      return error;
    }
    return null;
  },
  null,
);

<form> Actions

React 19에서는 <form> 요소에 action 및 formAction props를 사용하여 자동으로 양식을 관리할 수 있습니다.

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

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

새로운 훅: useOptimistic

데이터 변형 중에 낙관적 업데이트를 쉽게 만들기 위해 새로운 훅 useOptimistic을 추가했습니다.

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>
  );
}

새로운 API: use

렌더링 시 리소스를 읽을 수 있는 새로운 API인 use를 도입했습니다.

const profile = use(fetchProfile());
const theme = use(serverContext ? ServerTheme : ClientTheme);

React DOM

• <form> Actions: <form> 요소에 action 및 formAction props를 추가했습니다.
• Ref를 prop으로 사용: forwardRef 없이 함수 컴포넌트에서 Ref를 사용할 수 있습니다.
• 향상된 수화 오류 보고: 수화 오류를 단일 메시지로 보고합니다.

<form action={actionFunction}>

스타일시트 및 리소스 관리

스타일시트 및 리소스를 더 잘 관리하기 위한 새로운 API를 추가했습니다.

import {useStyleSheet} from 'react-dom';
useStyleSheet("/styles.css", {precedence: 1000});

import {usePreload} from 'react-dom';
usePreload("/styles.css", {as: "style"});

기타 개선 사항

• Context 제공자 단순화: Context 자체를 제공자로 사용할 수 있습니다.
• Ref의 정리 함수: Ref 콜백에서 정리 함수를 반환할 수 있습니다.
• useDeferredValue의 초기 값: 초기 값을 허용하여 초기 렌더링을 더 잘 처리합니다.
• 문서 메타데이터: <title>, <link> 및 <meta> 태그에 대한 네이티브 지원을 추가했습니다.

const inputRef = useCallback(node => {
  if (node) {
    // 마운트 시점에 작업
  }
  return () => {
    // 언마운트 시점에 정리 작업
  };
}, []);

 

참조 : https://react.dev/blog/2024/04/25/react-19