React 개발자라면 알아야 할 React19 소식

오늘은 React 19 버전에 대한 소식을 공유 해보려고 한다.

React를 개발하는 개발자들은 꼭 알아야할 정보라고 생각이된다.
최신버전에 대하여 알고 있어야지 무엇이 추가되었고, 변경되었는지를 파악할 수 있고, 앞으로 성장을 어떻게 해야할지도 생각할 수 있게 된다고 생각한다.

현재 React 19는 출시를 위해서 준비 작업들을 진행하고 있다고 한다.

관련된 내용들을 자세하게 다뤄보겠다.

1. React 컴파일러

React를 위한 컴파일러를 개발이며 오픈소스로 출시를 준비하고 있다고 한다.
또한 useMemo, useCallback 자동 최적화가 적용된다고 한다.

2. 새로운 client-side hooks

- use(Promise) -

이 새로운 훅은 클라이언트에서 중단하는 공식 API입니다.
프라미스를 전달하면 React가 해결될 때까지 이를 중단합니다.
이 훅을 데이터 가져오기에 사용할 수 있습니다.

import { use } from 'react';

function MessageComponent({ messagePromise }) {
    const message = use(messagePromise);
    // ...
}

React 문서에서 use(Promise)에 대해 자세히 확인할 수 있습니다.

- use(Context) -

이 훅은 React 컨텍스트를 읽는 데 사용됩니다.
useContext와 유사하지만 루프 및 조건문 내에서 호출할 수 있습니다.

import { use } from 'react';

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

React 문서에서 use(Context)에 대해 자세히 확인할 수 있습니다.

- Form actions -

이 새로운 기능을 사용하여 form 태그의 action prop에 함수를 전달할 수 있습니다.

<form action={handleSubmit} /> // form 태그 함수 전달

useFormState 훅은 비동기 폼 액션 기능을 지원합니다.

// useFormState
import { useFormState } from 'react-dom';
import { action } from './action';

function MyComponent() {
    const [state, formAction] = useFormState(action, null);
    // ...
    return <form action={formAction}>{/* ... */}</form>;
}

React 문서에서 useFormState에 대해 자세히 확인할 수 있습니다.

useFormStatus 훅은 부모 form 태그의 현재 제출 중인지 또는 성공적으로 제출되었는지 여부를 알려줍니다.

// useFormStatus
const { pending, data, method, action } = useFormStatus();

React 문서에서 useFormStatus에 대해 자세히 확인할 수 있습니다.

Form actions 관련 Hook들이 추가되었다고 하더라도 React-Hook-Form을 제거하기에는 충분하지 않을 수 있다고 생각을 한다.
하지만 추가적으로 라이브러리를 설치하지 않고 검색 처리를 크게 단순화 시킬 수 있다는건 상당히 큰 이점으로 다가올 것이라고 생각한다.

- useOptimistic -

이 훅을 사용하여 작업이 제출되는 동안 최적화된 방식으로 사용자 인터페이스를 업데이트할 수 있습니다.

import { useOptimistic } from 'react';

function AppContainer() {
    const [optimisticState, addOptimistic] = useOptimistic(
        state,
        // updateFn
        (currentState, optimisticValue) => {
            // merge and return new state
            // with optimistic value
        },
    );
}

React 문서에서 useOptimistic에 대해 자세히 확인할 수 있습니다.

추가적으로 자세한 내용들을 보고 싶다면 React Labs를 방문하여 읽어보는 것을 추천드립니다.