[React] React 19 출시 : 무엇이 해결되었을까?

2024년 12월 5일, React 팀이 드디어 React 19를 정식 출시했다!!

이번 메이저 업데이트는 개발자 경험을 획기적으로 개선했다고 생각하는데, 리액트 19의 주요 변화들을 정리해보고자 한다.

---

자동 최적화의 시대? 새로운 컴파일러가 도입됬다.

리액트 19의 가장 큰 변화는 새로운 컴파일러의 도입이다.

이제 더 이상 useCallback이나 useMemo와 같은 메모이제이션 훅을 수동으로 관리할 필요가 없어졌다!

아래 코드를 통해 이 변화를 보여주고자 한다.

기존코드:

const [count, setCount] = useState(0);

const handleIncrement = useCallback(() => setCount(count + 1), []);
const doubleCount = useMemo(() => count * 2, [count]);

return (
  <>
    <div>Count: {count}</div>
    <div>Double Count: {doubleCount}</div>
    <button onClick={handleIncrement}>increment</button>
  </>
)

기존코드가 위와 같다면, 리액트 19에서는 아래와 같이 단순화된다.

const [count, setCount] = useState(0);

const handleIncrement = () => setCount(count + 1);
const doubleCount = count * 2;

return (
  <>
    <div>Count: {count}</div>
    <div>Double Count: {doubleCount}</div>
    <button onClick={handleIncrement}>increment</button>
  </>
)

---

use 훅이 강력화됬다. useEffect& useContext의 진화!

새롭게 도입된 use 훅은 비동기 데이터 처리와 컨텍스트 관리를 더욱 효율적으로 만들어준다.

특히 조건문과 반복문 내에서도 사용할 수 있다는 점이 가장 큰 장점이 되는 것 같다!

아래는 비동기 데이터 페칭의 예시를 보여준다.

import React, { use, Suspense } from 'react';

async function fetchPerson() {
  const response = await fetch('https://api.example.com/person/1');
  return response.json();
}

function PersonComponent() {
  const person = use(fetchPerson());
  return <h1>{person.name}</h1>;
}

function App() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <PersonComponent />
    </Suspense>
  );
}

---

Action과 useFormStatus의 도입

리액트 19는 폼 처리를 위한 새로운 API들을 도입했다. 

바로 useFormStatus 훅인데, 이 훅을 통해 폼의 상태를 쉽게 관리할 수 있게 되었다.

import { useFormStatus } from "react-dom";

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>
    {status.pending ? '제출 중...' : '제출하기'}
  </button>
}

export default function Form() {
  return (
    <form action={async (formData) => {
      'use server';
      // 서버 사이드 로직
    }}>
      <Submit />
    </form>
  );
}

---

 

React가 가지고 있는 앞으로의 발전 가능성, 그리고 리액트가 현대 웹 개발의 복잡성을 앞으로도 어떻게 다루고자 하는지가 정말 궁금해지고 기대가 되는 것 같다!!