[React]React 19?

React 19

React 공식 블로그에 24.02.15에 업데이트 진행사항이 올라왔습니다.

주요 내용은 크게 React Compiler, Actions, New Features in React Canary입니다.

React Compiler

공식블로그에 따르면 React를 위한 컴파일러가 개발중이며 오픈 소스 릴리즈를 준비하고 있다고 한다.

React의 상태를 관리할 때 의도와는 달리 많은 리랜더링이 발생하는 경우가 있는데 이것을 해결하기 위해서는 useMemo, useCallback등과 같은 메모이제이션 방식을 통해 리랜더링을 줄이는 방법을 사용했는데 이를 자동화으로 최적화할 수 있도록 되어있다고 한다.

Actions

아래 코드에서 보이는 것과 같이 form에 action이 추가 되었습니다. 

action은 동기, 비동기식으로 모두 동작하며, 데이터를 제출할 때 useFormStatus, useFormState를 사용하여 데이터의 응답 및 에러처리와 같은 작업을 처리하기 쉽도록 도와준다고 합니다.
또, 한가지 추가되는 훅으로는 useOptimistic가 있습니다. useOptimistic은 말그대로 낙관적인 상태를 가져올 때 사용할 수 있다고 되어있습니다. 실제로 완료되는데 시간이 걸리더라도 사용자에게 결과를 즉시 보여줄 수 있도록 도와준다고 합니다.

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

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  return <Form action={submitForm} />;
}

New Features in React Canary

Directives

"use client"와 "use server"를 사용하여 Next.js와 같이 서버, 클라이언트 어느 부분에서 동작하는지에 대한 지시자를 설정할 수 있습니다.

Document Metadata

 <title>, <meta>, and metadata <link>와 같은 태그를 컴포넌트에 추가할 수 있습니다. 이전에는 React Helmet을 사용하던 작업을 지원합니다.

Asset Loading

Suspense를 <style>, <link>, <script> 태그의 요소들이 표시될 준비가 되어 있는지 판단할 수 있도록 하였으며, 리소스가 언제 로드되고 초기화될지에 대한 제어를 할 수 있도록 preload와 preinit와 같은 새로운 리소스 로딩 API를 추가하였습니다.

Actions

이전에 작성한 Actions 파트의 부분과 같습니다. <form>태그에 action을 추가하고, useFormStatus를 사용하여 상태를 관리하며, useFormState로 결과를 처리합니다. 또한, useOptimistic으로 UI를 낙관적으로 업데이트할 수 있습니다.

 

Conclusion

한동안 취업준비를 하면서 이전에 프론트엔드 개발 공부를 하느라 기술 업데이트 관련 내용을 찾아보는 것을 못했던 것 같았다. 그래서 react 공식 문서와 블로그를 보니 24.2.15 날짜로 새로운 글이 올라온 것을 보았고 유튜브에는 이미 내용들이 정리되어 많이 올라와 있었다. 추후 react 19로 버전업을 하는 경우에 어떤점을 학습해야하는지 어떤점이 좋아지는지에 대해 알고 있다면 프로젝트에 적용하는데 많으 도움이 될 것 같다.

위의 내용들을 봤을 때는 Next.js에서 사용하던 것들을 React에서도 사용할 수 있도록 많은 기능이 추가되는 것 같다. Next.js의 기능 뿐만 아니라 React Helmet, TanstackQuery등과 같은 일부 라이브러리의 기능을 사용할 수 있다면 라이브러리에 대한 의존성은 낮출 수 있을 거란 생각이 들었다. 하지만, 언제나 개발시장은 변화하고 있기 때문에 변화에 맞춰나가는 것이 가장 중요하다고 생각한다.

현재 거의 모든 웹 개발 시장이 React로 되어 있는데 이도 사실은 React에 많은 의존을 하고 있다는게 느껴지니 바닐라JS도 다시 학습해야겠다는 생각이 들었다.

Reference

- React 공식 블로그: https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024