React 19의 최신 안정버전, 눈여겨볼 새로운 기능들은 무엇일까?

2024-12-09 17:22:22

reactreactjsdevelopmentjavascriptreactnative

React 19: 기본 기능 이해하기

React 19가 드디어 발표되면서 많은 개발자들이 스포트라이트를 받고 있습니다. 특히 이번 버전에서는 신규 기능들이 도입되었으며, 기존 기능들이 대폭 개선되었습니다. 이 블로그 포스트에서는 React 19의 주요 변경 사항과 추가된 기능들을 심층 분석해 보겠습니다. 이 모든 내용을 통해 여러분이 React 개발에서 한 단계 더 나아갈 수 있도록 도움을 드리고자 합니다.

새로운 액션 시스템

React 19의 주목할 만한 특징 중 하나는 '액션'이라는 새로운 기능입니다. 이제 비동기 데이터 조작을 좀 더 쉽게 관리할 수 있게 되었습니다. 예를 들어 사용자의 이름을 변경하는 API 호출을 수월하게 처리할 수 있습니다. 이는 로딩 상태, 오류, 낙관적 업데이트를 매번 수동으로 처리할 필요성을 제거해 줍니다.

'use server';

async function updateUserName(newName) {
  return await fetch('/api/update-name', {
    method: 'POST',
    body: JSON.stringify({ name: newName }),
  });
}

function UserProfile({ user }) {
  const action = updateUserName;

  return (
    <form action={action}>
      <input defaultValue={user.name} name="name" />
      <button type="submit">Update Name</button>
    </form>
  );
}

이 예제에서 보듯이, 기존의 상태 관리 코드를 간소화하여 더 나은 사용자 경험을 제공할 수 있습니다.

개선된 폼 처리 방식

폼 요소에 function을 직접 action prop으로 전달할 수 있어 폼 제출 시 자동으로 진행 상태를 관리하고, 성공 시 폼을 리셋할 수 있습니다. 새로운 useActionState와 useFormStatus 훅을 결합하면 더욱 깔끔한 패턴으로 데이터를 조작할 수 있습니다.

import { useActionState, useFormStatus } from 'react';

function ContactForm() {
  const formStatus = useFormStatus();
  const isPending = useActionState();

  return (
    <form action="/api/submit-form">
      <input type="text" name="message" placeholder="Your Message" />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Sending...' : 'Send'}
      </button>
    </form>
  );
}

이 방법으로 더 이상 매번 로딩 스피너나 오류 상태에 관한 반복 코드를 작성할 필요가 없어졌습니다.

낙관적 업데이트와 새로운 훅

useOptimistic이라는 훅을 통해 서버로부터 확인을 받기 전, 바로 변경 사항을 화면에 반영할 수 있습니다. 이는 사용자가 이름을 변경할 때 새로운 이름을 즉시 보여주고, 서버 응답이 도착하면 이에 맞춰 조정할 수 있게끔 합니다.

import { useOptimistic } from 'react';

function UpdateStatus() {
  const [status, setStatus] = useOptimistic('offline', (current, newStatus) => newStatus);

  const handleClick = async () => {
    setStatus('online');
    await fetch('/api/set-status', { method: 'POST', body: 'online' });
  };

  return <button onClick={handleClick}>{status}</button>;
}

이 훅을 사용하여 사용자 경험을 크게 향상시킬 수 있습니다.

신규 API: use

React 19는 use라는 새로운 API를 도입하여 비동기 데이터 처리와 지연 처리 구간이 더욱 간편해졌습니다. 이는 전통적 의미의 훅이 아닌, 렌더링 함수 내에서 promise를 풀 때마다 자동으로 suspend하는 기능입니다.

import { use } from 'react';

function FetchUser({ userId }) {
  const user = use(fetch(`/api/users/${userId}`).then(res => res.json()));

  return <div>{user.name}</div>;
}

use API를 활용하여 비동기 데이터 처리가 더욱 자연스럽게 이루어집니다.

서버사이드 렌더링 개선

React 19에서는 preRender와 preRenderToNodeStream 같은 새로운 API들을 통해 서버사이드 렌더링이 더욱 강력해졌습니다. 이는 더 유연하고 강력한 정적 사이트 생성을 가능하게 합니다.

import { preRender } from 'react-dom';

const html = preRender(<App />);
console.log(html); // 사전 렌더링된 HTML 출력

이러한 기능을 통해 개발자들은 렌더링 성능을 높이고, 초기 로딩 시간을 줄이는 등 더 나은 사용자 경험을 제공할 수 있게 되었습니다.

서버 컴포넌트의 진화

서버사이드 컴포넌트는 React 19에서 성숙 단계에 접어들었습니다. 서버 액션은 이제 클라이언트 측 작업이 서버에서 구동될 수 있도록 함으로써 서버 사이드 로직을 간소화합니다.

'use server';

export async function fetchData() {
  const data = await fetch('/api/data').then(res => res.json());
  return data;
}

이 기능은 보다 하이브리드한 풀스택 렌더링 모델을 목표로 합니다.

삶의 질을 높이는 개선

마지막으로, React 19는 다양한 품질 개선 사항을 포함하고 있습니다. 오류 메시지는 더욱 명확해졌으며, 다른 클린 코드 기능들이 추가되었습니다.

리액트의 ref를 프롭으로 접근하는 기능을 도입
수분 오류가 보다 이해하기 쉽게 개선
Context.Provider 대신 컨텍스트 값을 직접 렌더링 가능
useDeferredValue에서 초기값 지원

function FocusableInput(props, ref) {
  return <input ref={ref} {...props} />;
}

const ForwardedInput = React.forwardRef(FocusableInput);

function App() {
  const inputRef = React.useRef();
  return <ForwardedInput ref={inputRef} />;
}

이와 같은 개선을 통해 개발자들은 더욱 편리하게 프로젝트를 유지하고 발전시킬 수 있습니다.

결론

React 19의 새롭고 개선된 기능들은 개발자로 하여금 더 효율적이고 간결하게 코드를 작성할 수 있도록 돕습니다. 액션, 폼 처리, 서버 렌더링 성능은 물론 다양한 품질 개선을 통해 리액트 앱 개발이 더욱 직관적이고 빠르게 진행될 것입니다.

추가적으로 더 알고 싶은 분들은 공식 React 블로그와 업그레이드 가이드를 참조하시는 것을 추천드립니다. 또한 코드 모드를 최대한 활용하여 최신 기능을 프로젝트에 적용해 보세요.

다른 최신 기술들의 이야기와 더불어, 나만의 리액트 프로젝트를 더욱 매력적으로 만드는 방법을 찾고 계신가요? 그럼 아래 링크를 참고해보세요!