React 19의 새로운 기능-JS 튜토리얼-php.cn

React 19의 새로운 기능

Linda Hamilton

풀어 주다： 2024-12-23 13:37:23

원래의

727명이 탐색했습니다.

What’s new in React 19

행위

React 앱의 일반적인 사용 사례는 데이터 변형을 수행한 다음 이에 대한 응답으로 상태를 업데이트하는 것입니다. 예를 들어 사용자가 이름을 변경하기 위해 양식을 제출하면 API 요청을 한 다음 응답을 처리합니다. 과거에는 보류 상태, 오류, 낙관적 업데이트 및 순차적 요청을 수동으로 처리해야 했습니다.

예를 들어 useState에서 보류 및 오류 상태를 처리할 수 있습니다.

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    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>
  );
}

로그인 후 복사

React 19에서는 보류 상태, 오류, 양식 및 낙관적 업데이트를 자동으로 처리하기 위해 전환에 비동기 함수를 사용하는 지원을 추가하고 있습니다.

예를 들어, useTransition을 사용하여 보류 상태를 처리할 수 있습니다.

// Using pending state from 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>
  );
}

로그인 후 복사

비동기 전환은 즉시 isPending 상태를 true로 설정하고, 비동기 요청을 하고, 모든 전환 후에 isPending을 false로 전환합니다. 이를 통해 데이터가 변경되는 동안 현재 UI의 반응성과 대화형을 유지할 수 있습니다.

메모

관례상 비동기 전환을 사용하는 함수를 '액션'이라고 합니다.
작업을 통해 제출된 데이터가 자동으로 관리됩니다.

보류 상태: 작업은 요청 시작 시 시작되고 최종 상태 업데이트가 커밋되면 자동으로 재설정되는 보류 상태를 제공합니다.
낙관적 업데이트: 작업은 새로운 useOptimistic 후크를 지원하므로 요청이 제출되는 동안 사용자에게 즉각적인 피드백을 표시할 수 있습니다.
오류 처리: 작업은 오류 처리를 제공하므로 요청이 실패할 때 오류 경계를 표시하고 낙관적 업데이트를 원래 값으로 자동으로 되돌릴 수 있습니다.
양식: <양식> 요소는 이제 action 및 formAction 소품에 함수 전달을 지원합니다. 액션 소품에 함수를 전달하면 기본적으로 액션이 사용되며 제출 후 자동으로 양식이 재설정됩니다.

액션을 기반으로 구축된 React 19에서는 낙관적 업데이트를 관리하기 위한 useOptimistic과 액션의 일반적인 사례를 처리하기 위한 새로운 후크 React.useActionState를 도입했습니다. React-dom에서는

양식을 자동으로 관리하고 FormStatus를 사용하여 양식의 작업에 대한 일반적인 사례를 지원하는 작업입니다.

React 19에서 위의 예는 다음과 같이 단순화될 수 있습니다.

// Using <form> Actions and useActionState
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>
  );
}

로그인 후 복사

다음 섹션에서는 React 19의 새로운 Action 기능을 각각 자세히 살펴보겠습니다.

새로운 후크: useActionState

Action의 일반적인 사례를 더 쉽게 만들기 위해 useActionState라는 새로운 후크를 추가했습니다.

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      // You can return any result of the action.
      // Here, we return only the error.
      return error;
    }

    // handle success
    return null;
  },
  null,
);

로그인 후 복사

useActionState는 함수("Action")를 허용하고 호출할 래핑된 Action을 반환합니다. 이는 작업이 구성되기 때문에 작동합니다. 래핑된 Action이 호출되면 useActionState는 Action의 마지막 결과를 데이터로 반환하고 Action의 보류 상태를 보류 중으로 반환합니다.