[React] React19에 관하여

✔️들어가며

이번 시간에는 React19 즉, React 18 이후의 다음 버전으로 예상되는 React의 주요 업데이트의 예상되는 주요 특징 및 변화에 대해서 알아보는 시간을 가져보겠습니다. 현재 React 19에 대한 구체적인 정보는 공개되지 않았으므로, 일반적인 버전 업데이트에서 예상할 수 있는 변화를 바탕으로 작성해보겠습니다.

React 19는 React 라이브러리의 최신 주요 업데이트로, 성능 향상과 개발자 경험 개선을 목표로 하는 여러 새로운 기능과 개선 사항을 도입할 전망입니다.

✔️주요 변경점

React Compoiler

React 19 버전의 주요 변화 중 하나는 리액트 컴파일러이다.
리액트 컴파일러는 리액트 코드를 일반 자바스크립트 코드로 변환한다.
주요 이점으로 전반적인 앱 성능을 향상 시키는 것이지만 더 좋은 점은 개발자가 성능에 대해 많은 고민을 할 필요가 줄어들었다.
기존에는 불필요한 렌더링을 줄이기 위해 메모이제이션(Memoization)을 위한 useCallback, useMemo와 같은 것들을 사용해야 했다.
하지만, 메모이제이션 자체도 남발하면 오히려 성능이 저하되어서 개발하는 입장에서 이 기준을 명확히 잡는데 고민이 필요했다.
이런 문제를 리액트 컴파일러가 자동으로 리액트 코드를 최적화하여 이런 문제로 고민할 필요가 줄어들었다.
즉, 위에서 언큼한 메모이제이션을 위한 훅들을 사용하지 않아도 된다.

요약

자동 메모이제이션: React 컴파일러는 모든 훅과 컴포넌트를 자동으로 메모이제이션한다. 이는 기존의 useMemo와 useCallback을 수동으로 사용할 필요를 줄여주며, 코드의 가독성과 유지보수성을 높여준다.

성능 최적화: 컴파일러는 비용이 많이 드는 계산을 자동으로 최적화하여, 개발자가 직접 최적화 코드를 작성하지 않아도 된다. 이를 통해 초기 로드 시간과 상호작용 속도가 크게 개선되었다.

비즈니스 로직에 집중: 개발자는 성능 최적화에 대한 부담을 덜고 비즈니스 로직 작성에 집중할 수 있게 되었다. 컴파일러가 자동으로 최적화를 처리하므로, 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있다.

✔️신규 Hook에 대한 소개

use(Context)

import { use } from 'react';

function HorizontalRule({ show }) {
  if (show) {
    const theme = use(ThemeContext);
    return <hr className={theme} />;
  }
  return false;
}

작동 방식

HorizontalRule 컴포넌트는 show prop을 받아, show가 참이면 ThemeContext의 값을 읽어와 hr 요소를 해당 테마로 렌더링합니다.
show가 거짓이면 아무 것도 렌더링하지 않는다.

use 훅의 특징

use 훅은 React 19에서 도입된 새로운 훅으로, 조건부로 컨텍스트 값을 읽어올 수 있다.
기존의 useContext 훅은 조건부로 사용할 수 없지만, use 훅은 조건문 내에서 사용할 수 있다

즉, 조건문 안에서 호출할 수 있다는 점만 다르고 기존 useContext와 동일하다.
(그런데 왜 이름을 use를 쓰는건지 이해가 안감)

useFormState

import React from 'react';
import { useFormState } from 'react-dom';

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm() {
  const [state, formAction] = useFormState(increment, 0);

  return (
    <form>
      {state}
      <button formAction={formAction}>증가</button>
    </form>
  );
}

작동 방식

StatefulForm 컴포넌트가 렌더링될 때, useFormState 훅을 통해 상태와 폼 액션 핸들러를 설정합니다.
초기 상태는 0이며, increment 함수는 상태를 1 증가시키는 역할을 합니다.
폼 내에서 현재 상태가 표시되며, "증가" 버튼을 클릭하면 formAction이 호출되어 상태가 업데이트됩니다.

useFormStatus

import React from 'react';
import { useFormState, useFormStatus } from 'react-dom';

async function registerUser(previousState, formData) {
  // 서버에 폼 데이터 제출을 시뮬레이션합니다.
  await new Promise(resolve => setTimeout(resolve, 1000));
  return '등록 성공';
}

function RegistrationForm() {
  const [status, formAction] = useFormState(registerUser, '');
  const { isPending } = useFormStatus();

  return (
    <form>
      <input type="text" name="username" placeholder="사용자 이름" required />
      <input type="password" name="password" placeholder="비밀번호" required />
      <button formAction={formAction}>회원가입</button>
      {isPending && <p>제출 중...</p>}
      {status && <p>{status}</p>}
    </form>
  );
}

export default RegistrationForm;

작동 방식

useFormState는 폼의 상태를 관리하고, useFormStatus는 폼이 제출 중인지 여부를 추적하여 사용자에게 피드백을 제공한다. 이로 인해 사용자는 폼 제출 중임을 알 수 있고, 폼 제출이 완료되면 결과 메시지를 받을 수 있다.

React 18에서 Form action 작성시 Warning이 나오게 되는데 React 19부터는 useFormState와 useFormStatus 훅을 활용하여 점점 form이 고도화되고 있는 것을 지래짐작 할 수 있다.

useOptimistic

import { useOptimistic, useState, useRef } from "react";
import { deliverMessage } from "./actions.js";

function Thread({ messages, sendMessage }) {
  const formRef = useRef();
  async function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    await sendMessage(formData);
  }
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true
      }
    ]
  );

  return (
    <>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

export default function App() {
  const [messages, setMessages] = useState([
    { text: "Hello there!", sending: false, key: 1 }
  ]);
  async function sendMessage(formData) {
    const sentMessage = await deliverMessage(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }
  return <Thread messages={messages} sendMessage={sendMessage} />;
}

작동 방식

사용자가 폼에 메시지를 입력하고 “전송” 버튼을 누르면, useOptimistic Hook은 메시지가 실제로 서버로 전송되기 전에 “전송 중…” 라벨이 있는 목록에 메시지가 즉시 나타나도록 한다. 그런 다음 폼은 백그라운드에서 메시지를 실제로 전송하려고 시도한다. 서버가 메시지를 받았음을 확인하면, “전송 중…” 라벨이 제거된다.

주요 기능

• React 서버 컴포넌트 (Server Components):
  서버 컴포넌트는 클라이언트 애플리케이션이나 SSR 서버와 분리된 환경에서 미리 컴포넌트를 렌더링할 수 있게 해준다. 이를 통해 클라이언트 측의 작업 부담을 줄이고 성능을 개선할 수 있다.

• 서버 액션 (Server Actions):
  서버 액션을 통해 클라이언트 컴포넌트가 서버에서 실행되는 비동기 함수를 호출할 수 있다. 이 기능은 무거운 계산 작업을 서버로 오프로드하여 클라이언트 성능을 향상시킨다.

• Ref를 Prop으로 사용:
  함수형 컴포넌트가 이제 ref를 prop으로 직접 사용할 수 있어, forwardRef를 사용할 필요 없이 코드를 간소화할 수 있다.

• 문서 메타데이터 관리 개선:
  React 19는 title, meta, link 태그를 React 컴포넌트 내에서 직접 관리할 수 있는 내장 지원을 도입하여, 추가 라이브러리 없이도 SEO와 접근성을 개선할 수 있다.

• 웹 컴포넌트 통합:
  이제 웹 컴포넌트를 React 애플리케이션에 더 쉽게 통합할 수 있어, 기존의 유용한 웹 컴포넌트를 React와 함께 사용할 수 있다.

• 향상된 자산 로딩:
  React 19는 Suspense와 자산 로딩을 통합하여 이미지, 스타일시트, 폰트 등의 자원을 부드럽게 로드하여 레이아웃 변경과 깜박임을 줄인다.

• Deprecated 및 제거된 API:
  ReactDOM.render와 ReactDOM.findDOMNode와 같은 여러 오래된 API가 제거되었다. 개발자는 createRoot와 DOM refs와 같은 대안을 사용해야 한다.