React 19의 새로운 기능들

 React 19는 성능과 개발자 경험을 개선하기 위한 여러 새로운 기능을 도입했다. 이번 업데이트에서는 서버와 클라이언트 간의 통합을 강화하고, 코드 최적화 및 사용자 경험 향상에 중점을 두었다. 이번 글에서는 React 19에서 도입된 주요 기능과 그 사용법에 대해 설명한다.

1. 서버 컴포넌트와 클라이언트 컴포넌트의 통합

 React 19에서 가장 큰 변화 중 하나는 서버와 클라이언트 컴포넌트 간의 통합이다. 이제 서버에서 처리한 데이터를 클라이언트가 받아 바로 랜더링할 수 있어, 단일 작업을 서버와 클라이언트가 나눠서 실행함으로써  UX가 끊기지 않고 자연스럽게 이어질 수 있다. 

export default async function ServerComponent() {
  // 서버에서 API 호출을 통해 데이터를 가져옴
  const data = await fetchDataFromAPI();

  return (
    <ClientComponent data={data}/>
  );
}

 위의 서버 컴포넌트에서 아래 클라이언트 컴포넌트를 호출하는 것을 볼 수 있다.

export default function ClientComponent({data}) {
  return (
    <div>
      {data}
    </div>
  );
}

2. 새로운 useAction 훅

 React 19에서 새로 도입된 useAction 훅은 서버와 클라이언트 간의 작업을 더욱 간편하게 처리할 수 있도록 돕는 기능이다. 이 훅은 React 18에서 도입된 useTransition과 같은 비동기 상태 관리를 더 직관적이고 일관성 있게 사용할 수 있게 해준다. 특히 폼 액션을 처리할 때 매우 유용하며, 자식 컴포넌트에서는 useFormStatus를 활용해 폼 상태를 관리할 수 있다.

 React 18에서는 useTransition 훅을 사용해 비동기 작업을 처리하는 동안 사용자 인터페이스(UI)가 블로킹되지 않도록 비동기 작업을 시작하고, 상태 업데이트를 관리했다. 하지만 이 방식은 특정한 상황에서 코드가 복잡해질 수 있었다. 이를 해결하기 위해 React 19에서는 useAction 훅을 도입했다. 이 훅은 서버와 클라이언트 간의 작업 요청을 더욱 직관적이고 간결하게 처리해준다.

function MyForm() {
  const action = useAction('/api/submitForm');

  return (
    <form onSubmit={action}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

3. 새로운 useOptimistic 훅을 통한 낙관적 업데이트

 useOptimistic 훅은 서버로의 요청을 기다리지 않고, 사용자가 예상할 수 있는 결과를 미리 화면에 보여줄 수 있도록 해준다. 이는 사용자 경험을 대폭 개선할 수 있는 중요한 기능이다.

import { useOptimistic } from 'react';

function OptimisticComponent() {
  const [optimisticState, updateOptimisticState] = useOptimistic({
    text: 'Initial Text',
  });

  function handleSubmit(newText) {
    updateOptimisticState({ text: newText });
    sendToServer(newText);  // 서버에 데이터 전송
  }

  return (
    <div>
      <p>{optimisticState.text}</p>
      <button onClick={() => handleSubmit('Updated Text')}>Update</button>
    </div>
  );
}

4. 새로운 use훅을 통한 서버 데이터 처리

 React 19에서 도입된 use 훅은 서버 컴포넌트에서 생성된 Promise를 클라이언트 컴포넌트에서 자연스럽게 사용할 수 있도록 해준다. 이전에는 useEffect나 별도의 상태 관리 코드로 서버 데이터를 처리해야 했으나, 이제 use 훅을 사용해 서버에서 반환된 Promise를 간단히 사용할 수 있다.

이 기능은 데이터를 모두 받아오지 않아도 클라이언트에서 페이지를 부분적으로 렌더링할 수 있어, 사용자 경험을 크게 향상시킨다. 특히 서버에서 비동기 작업이 완료되지 않아도 클라이언트 측에서 대기 없이 데이터를 보여줄 수 있다.

// 서버 컴포넌트에서 데이터를 Promise로 받아옴
async function Comment() {
  const reactionsPromise = db.comment.getReactions(comment.id); // 서버에서 데이터를 가져오는 Promise

  return (
    <ErrorBoundary fallback={<TryAgain />}>
      <Suspense fallback={<Loading />}>
        <Reactions reactionsPromise={reactionsPromise} />
      </Suspense>
    </ErrorBoundary>
  );
}

// 클라이언트 컴포넌트에서 use 훅을 사용해 서버 데이터를 받아옴
function Reactions({ reactionsPromise }) {
  const reactions = use(reactionsPromise); // use 훅으로 서버에서 받은 Promise 사용

  return (
    <div>
      {reactions.map(reaction => (
        <Reaction key={reaction.id} {...reaction} />
      ))}
    </div>
  );
}

5. 리액트 컴파일러와 자동 최적화

 React 19는 새로운 컴파일러를 도입하여 개발자들이 별도의 설정 없이 코드의 최적화를 자동으로 처리한다. 이 컴파일러는 불필요한 메모리를 없애거나, 캐시를 효율적으로 관리하여 렌더링 성능을 향상시킨다. 특히 useMemo나 useCallback 같은 메모이제이션 처리도 자동으로 해준다.

function ExpensiveComponent({ prop }) {
  const computedValue = computeExpensiveValue(prop); // 컴파일러가 자동으로 최적화 처리

  return <div>{computedValue}</div>;
}

6. 메타 태그와 프리로드 설정의 간소화

 React 19에서는 컴포넌트에서 직접 메타 태그를 관리할 수 있고, 프리로드를 통해 중요한 자원을 우선적으로 로딩할 수 있게 되었다. 이 기능은 페이지 성능을 크게 향상시킬 수 있다.

function HeadComponent() {
  return (
    <>
      <meta name="description" content="This is a React 19 app" />
      <link rel="preload" href="/static/important-resource.js" as="script" />
    </>
  );
}