뉴스레터 요약

리액트 공식 사이트에 리액트 19 베타 버전에 대한 설명이 올라왔다.
이 글에는 리액트 19에서 새롭게 추가된 기능, 개선된 사항 등을 소개하고 있다.
리액트 19에서 새롭게 추가된 기능과 훅, API 로는

• 기능: Actions, <form>Actions
• 훅: useTransition, useActionState, useFormStatus, useOptimistic
• API: use

가 있고, 개선된 사항으로는

• 함수 컴포넌트에서 ref를 프로퍼티로 접근 가능하게 함
• 하이드레이션 에러 발생 시 구체적인 정보를 제공함
• Context.provider 대신 Context를 프로바이더로 이용함
• ref 콜백에서 클린업 함수를 반환하는 것을 지원함
• useDeferredValue에 initialValue 옵션을 추가함
• 컴포넌트 자체에 문서 메타데이터 태그를 렌더링하는 기능이 추가됨
• 스타일시트의 precedence를 지정하면 DOM에서 스타일시트의 삽입 순서를 관리하고, 해당 스타일 규칙에 의존하는 콘텐츠를 보여주기 전에 스타일시트가 로드되도록(외부 스타일시트인 경우) 보장함
• 비동기 스크립트 지원 -> 제대로 이해하지 못함
• 리소스 프리로딩 지원
• 서드파티 스크립트와 확장 프로그램 호환성 -> 제대로 이해하지 못함
• 중복 에러 제거 등 에러 보고의 개선
• 사용자 정의 요소(Custom Elements) 지원 -> 제대로 이해하지 못함

액션(Actions)

• 액션 부분을 읽던 도중 아래 문장이 이해가 가지 않아서 직접 코드를 써서 테스트 해 보기로 했다.

  비동기 트랜지션은 isPending 값을 즉시 true로 설정하며 비동기 요청을 보내고, 트랜지션이 수행되면 isPending을 false로 전환합니다. 이러한 방식은 데이터가 변경되는 동안에도 현재 UI의 반응성 및 상호작용을 유지할 수 있습니다.

리액트 19 베타 설치하기

1. vite 설치
   npm create vite@latest
2. 프로젝트 폴더로 이동 후 의존성 설치
   cd vite-project
npm install
3. 리액트 19로 업데이트
   React 19 Beta Upgrade Guide에 나와있는 대로 아래 명령어 입력
   npm install react@beta react-dom@beta
   pakage.json
   

테스트 코드 작성하기

import { useState, useTransition } from 'react';

async function updateNumber(count, setCount) {
  await new Promise((resolve) =>
    setTimeout(() => {
      setCount(count + 1);
      resolve();
    }, 3000)
  );
  return null;
}

function App() {
  // React 18 버전
  const [count, setCount] = useState(0);
  const [isPending, setIsPending] = useState(false);

  const handleClickReact18 = async () => {
    setIsPending(true);
    await updateNumber(count, setCount);
    setIsPending(false);
  };

  // React 19 버전
  const [count19, setCount19] = useState(0);
  const [isPending19, startTransition] = useTransition();

  const handleClickReact19 = async () => {
    startTransition(async () => {
      await updateNumber(count19, setCount19);
    });
  };

  return (
    <div>
      {/* React 18 버전 */}
      <h1>리액트 18 예시</h1>
      <p>Count: {isPending ? 'Loading...' : count}</p>
      <button onClick={handleClickReact18}>Increment</button>

      {/* React 19 버전 */}
      <h1>리액트 19 예시</h1>
      <p>Count: {isPending19 ? 'Loading...' : count19}</p>
      <button onClick={handleClickReact19}>Increment</button>
    </div>
  );
}  

• 위 테스트 코드를 통해 "이러한 방식은 데이터가 변경되는 동안에도 현재 UI의 반응성 및 상호작용을 유지할 수 있습니다." 부분을 이해 할 수 있었다.
• 18버전에서는 useState를 이용해서 isPending 상태일 때 "Loading..."을 나타낼 수 있었지만 19버전에서는 useTransition을 통해 보다 간편하게 isPending 상태를 관리할 수 있다는 의미의 문장이었다.

액션이란

액션은 비동기 트랜지션(async transitions)을 사용하는 함수를 말한다.

• 사실 비동기 트랜지션이 뭔지 잘 모르겠다.
• 어쨌든 이전 버전에서는 useState 등을 이용해서 수동으로 관리하던 데이터들을 자동으로 관리할 수 있게 해준다.
• 위 예시에서 나왔던 Pending state외에도 Optimistic updates, Error, Form과 관련된 데이터들을 자동으로 관리할 수 있다.

회고

• 액션이 등장함으로써 비동기 함수와 관련된 상태관리가 쉬워진것 같다. 나는 Tanstack Query를 이용해서 로딩 및 에러 상태를 처리하고, optimistic update를 구현했는데 리액트 19가 상용화 되면 어떤 것을 쓰게 될지 궁금하다. 또, form을 관리할 때는 React Hook Form을 사용했는데 <form>Actions로 이런 라이브러리를 대체할 수 있을 지 궁금하다.
• 메타데이터 태그를 렌더링 하는 기능이 기대된다. react-helmet을 사용하면 콘솔에 오류가 떠서 불편했는데 이 라이브러리를 대체할 수 있을 것 같다.
• 액션을 이해하기 위해서 코드를 짜던 도중 useState와 비동기에 대한 이해가 부족하다고 느꼈다. 이 부분을 보충해야 겠다.
• 리액트를 사용할 때 마다 중복 에러가 떠서 불편하다고 생각했는데 이런 점이 개선되니 신기했다.
• 사실 액션의 핵심 부분만 이해하고 나머지 부분은 시간 관계상 꼼꼼하게 읽기 어려웠다. 흥미로운 지식을 얻기 위해서 더 많은 공부가 필요함을 느꼈다.

참고 자료

• React 19 Beta 번역
• React 19 Beta 원문
• React 19 Beta 유튜브 자료