[ React ] React 19 RC에 대해서 알아보자

 

 

 

React19 RC(Release Candidate)는 현재 개발 중이며 2024년 9월 기준으로 아직 정식 출시되지 않았다.

 

 

가장 최신 정보(2024년 4월 기준, React Blog 참고)를 바탕으로 설명하자면 React 19는 이전 버전들과 비교해 몇 가지 주요 개선사항과 새로운 기능들을 포함할 것으로 예상된다.

 

 

1. 성능 개선: 렌더링과 상태 업데이트 성능이 향상될 전망.
2. 서버 컴포넌트: 서버 사이드 렌더링을 더욱 효율적으로 만들어주는 서버 컴포넌트의 완전한 구현이 포함될 가능성이 높다.
3. 동시성 기능 개선: React 18에서 도입된 동시성 기능들이 더욱 안정화되고 발전될 것으로 예상.
4. 새로운 훅: 개발자들의 작업을 더욱 편리하게 만들어줄 새로운 훅들이 추가될 수 있다.
5. 타입스크립트 지원 강화: 타입스크립트와의 통합이 더욱 강화될 것으로 보인다.

 

 

---

 

 

 

Actions

기존에는 pending, states, errors, optimistic updates, sequential requests 등에 대한 액션을 수동으로 처리해야 했다.

 

// 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 에서는 전환(transitions)에서 비동기 함수를 사용하여, pending, states, errors, optimistic updates, sequential requests 등에 대한 액션을 자동으로 처리할 수 있는 지원이 추가된다. 예를 들어 아래와 같은 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>
  );
}

 

 

 

 

 

 

 

 

 

또한 Actions의 일반적인 사용 사례를 더 쉽게 만들기 위해 useActionState라는 새로운 hook이 추가되었다.

이 hook은 함수를 인자로 받고, 호출할 수 있는 래핑된 Action을 반환한다. 래핑된 Action이 호출될 때, useActionState는 Action의 마지막 결과를 data로, Action의 대기 상태를 pending으로 반환한다.

 

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

 

 

 

 

 

 

소개된 정확한 기능과 변경사항은 공식 출시 전까지 계속 수정될 수 있으며, 추가적으로 React 19의 정확한 세부사항을 알고 싶다면, React 공식 블로그나 GitHub 저장소를 확인하면 된다.

 

 

 

 

 

 

 

 

 

 

 

---

 

🌸 출처 🌸

 

React 19 RC