🎧Be Dilettante⌨️

원문: https://marmelab.com/blog/2024/01/23/react-19-new-hooks.html

일반적인 생각과 달리 React core팀은 리액트 서버 컴포넌트와 Next.js에만 오직 초점을 두진 않는다. 새로운 client-side 훅들이 다음 React 메인 버전인 19버전에 도입된다. 그들은 리액트의 두 가지 주요 문제점, 즉 데이터 가져오기(data fetching)과 폼(form)에 초점을 맞추고 있다. 이 훅들은 싱글 페이지 어플리케이션 작업을 하는 개발자를 포함해 React 개발자들의 생산성을 향상시켜줄 것이다.

더 이상 고민하지 말고, 새로운 훅들을 살펴보자!

• use(Promise)
• use(Context)
• Form actions
• useFormState
• useFormStatus
• useOptimistic
• Bonus: Async transitions

주목: 이 훅들은 React의 Canary와 실험적 채널에서만 사용할 수 있다. 이 훅들은 곧 출시될 리액트 19에 포함되지만, API는 최종 출시 전에 변경될 수 있다.

use(Promise)

이 새로운 훅은 클라이언트의 'suspending'을 위한 공식 API이다. 당신은 그것을 promise로 넘길 수 있고 리액트는 그것이 해결될 때까지 그것을 중단시킬 것이다. React use 문서에서 가져온 기본 구문은 다음과 같다.

import { use } from 'react';

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

좋은 소식은 이 훅이 데이터 패칭에 사용될 수 있다는 것이다. 여기 마운트시와 버튼 클릭시 데이터 패칭을 하는 구체적인 예시가 있다. 이 코드는 단일 useEffect를 사용하지 않는다:

<Suspense> 문서의 이 경고를 기억하는가?

프레임워크의 의견 없는 Suspense 지원 데이터 패칭은 아직 지원되지 않는다.

이는 React19에서는 더 이상 사실이 아니다.

새로운 use 훅은 숨겨진 힘이 있다: 다른 모든 React Hook들과 달리, use는 loop와 if와 같은 조건 절에서 호출할 수 있다.

이 말이 즉, 클라이언트 측에서 데이터를 가져오기 위해 TanStack Query와 같은 서드파티 라이브러리를 더 이상 사용할 필요가 없음을 의미할까? TanStack Query가 단순히 Promise를 해결하는 것 이상의 역할을 하기 때문에 더 두고 봐야 한다.

하지만 그것은 올바른 방향으로 나아가는 훌륭한 단계이며 REST 또는 GraphQL API를 기반으로 한 싱글 페이지 어플리케이션을 쉽게 만들 수 있을 것이다. 나는 이 새로운 훅에 매우 열광한다!

React 문서에서 use(Promise) 훅에 대한 자세한 내용을 읽어보아라.

use(Context)

React Context를 읽는데 같은 use 훅을 사용할 수 있다. 루프 안에서 호출할 수 있으며 if와 같은 조건문을 사용할 수 있다는 점을 제외하면 이는 정확히 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>의 액션 프롭에 전달할 수 있다. 폼이 제출되면 React는 이 함수를 호출한다:

만약 당신이 <form action> 프롭을 React18에서 추가한다면 당신은 경고(warning)를 받게 될 것을 기억하라:

Warning: Invalid value for prop action on <form> tag. Either remove it from the element or pass a string or number value to keep it in the DOM.

다음과 같은 form을 작성할 수 있는 React 19에서 이 경고는 더 이상 사실이 아니다.

import { useState } from 'react';

const AddToCartForm = ({ id, title, addToCart }) => {
  const formAction = async (formData) => {
    try {
      await addToCart(formData, title);
    } catch (e) {
      // show error notification
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">Add to Cart</button>
    </form>
  );
};

type Item = {
  id: string;
  title: string;
};

const Cart = ({ cart }: { cart: Item[] }) => {
  if (cart.length == 0) {
    return null;
  }
  return (
    <>
      Cart content:
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
      <hr />
    </>
  );
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // simulate an AJAX call
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setCart((cart: Item[]) => [...cart, { id, title }]);

    return { id };
  };

  return (
    <>
      <Cart cart={cart} />
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
      />
    </>
  );
};

accToCart 함수는 서버 Action이 아니다. 이것은 클라이언트 측에서 호출되며 비동기 기능일 수 있다.

이렇게 하면 리액트에서 검색 폼과 같은 AJAX 폼의 처리가 크게 간단해질 것이다. 그러나 이것은 양식 제출(유효성 확인, 사이드 이펙트 등)을 처리하는 것 이상의 일을 하는 React Hook Form과 같은 서드파티 라이브러리를 없앨만큼 충분하지 않을 수 있다. 

Tip: 당신은 위 예제에서 몇몇 사용성 문제를 발견할 수 있다. (submit을 진행할 때 submit 버튼이 활성화되지 않음, 확인 메세지 누락, 늦은 카트 업데이트). 다행히도 더 많은 훅들이 이러한 사용 사례를 돕기 위해 제공되고 있다. 계속 읽어보길!

React 문서에서 the <form action> prop에 대한 자세한 내용을 읽어보아라.

useFormState

이 새로운 훅은 아래 묘사한 것처럼 비동기 폼 액션을 돕는 역할을 한다. useFormState를 호출해 폼이 제출된 마지막 시점부터 액션의 반환 값에 접근한다.

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

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

예를 들어, 이것은 당신이 폼 액션에서 반환된 확인 혹은 에러 메세지를 보여주게 한다.

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

const AddToCartForm = ({ id, title, addToCart }) => {
  const addToCartAction = async (prevState, formData) => {
    try {
      await addToCart(formData, title);
      return 'Added to cart';
    } catch (e) {
      return "Couldn't add to cart: the item is sold out.";
    }
  };

  const [message, formAction] = useFormState(addToCartAction, null);

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">Add to Cart</button>&nbsp;
      {message}
    </form>
  );
};

type Item = {
  id: string;
  title: string;
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // simulate an AJAX call
    await new Promise((resolve) => setTimeout(resolve, 1000));
    if (id === '1') {
      setCart((cart: Item[]) => [...cart, { id, title }]);
    } else {
      throw new Error('Unavailable');
    }

    return { id };
  };

  return (
    <>
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
      />
    </>
  );
};

주목: useFormState는 react가 아니라 react-dom에서 부터 import되어야 한다.

React 문서에서 useFormState에 대한 자세한 내용을 읽어보아라.

useFormStatus

useFormStatus를 사용하면 부모 <form>이 현재 제출 중이거나 성공적으로 제출했는지 알 수 있다. 폼의 자식에서 호출할 수 있으며 다음 속성을 가진 개체를 반환한다:

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

당신은 데이터 속성을 통해 유저가 제출 중인 데이터를 표시할 수 있다. 폼이 제출되는 동안 버튼이 비활성화된 pending 상태 또한 아래 예시와 같이 표시할 수 있다:

import { useState } from 'react';
import { useFormStatus } from 'react-dom';

const AddToCartForm = ({ id, title, addToCart }) => {
  const formAction = async (formData) => {
    try {
      await addToCart(formData, title);
    } catch (e) {
      // show error notification
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <SubmitButton />
    </form>
  );
};

const SubmitButton = () => {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} type="submit">
      Add to Cart
    </button>
  );
};

type Item = {
  id: string;
  title: string;
};

const Cart = ({ cart }: { cart: Item[] }) => {
  if (cart.length == 0) {
    return null;
  }
  return (
    <>
      Cart content:
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
      <hr />
    </>
  );
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // simulate an AJAX call
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setCart((cart: Item[]) => [...cart, { id, title }]);

    return { id };
  };

  return (
    <>
      <Cart cart={cart} />
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
      />
    </>
  );
};

주목: useFormStatus는 react가 아닌 react-dom에서 import해야 한다. 또한 부모 폼이 위에서 설명한 action prop을 사용할 때만 작동한다.

이 훅은 useFormState와 함께 불필요한 컨텍스트 효과로 컴포넌트를 어수선하게 만들지 않고 클라이언트 측 폼의 유저 경험을 향상시킬 것이다. useFormStatus 후크에 대한 자세한 내용은 React 문서에서 확인할 수 있다.

useOptimistic

이 새로운 훅은 actioin이 제출되는 동안 사용자 인터페이스를 최적으로 업데이트할 수 있게 한다. 

import { useOptimistic } from 'react';

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

위 카트 예제에서 우리는 AJAX 호출이 완료되기 전에 새 항목이 추가된 카트를 표시할 수 있다: 

import { useState, useOptimistic } from 'react';

const AddToCartForm = ({ id, title, addToCart, optimisticAddToCart }) => {
  const formAction = async (formData) => {
    optimisticAddToCart({ id, title });
    try {
      await addToCart(formData, title);
    } catch (e) {
      // show error notification
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">Add to Cart</button>
    </form>
  );
};

type Item = {
  id: string;
  title: string;
};

const Cart = ({ cart }: { cart: Item[] }) => {
  if (cart.length == 0) {
    return null;
  }
  return (
    <>
      Cart content:
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
      <hr />
    </>
  );
};

export const App = () => {
  const [cart, setCart] = useState<Item[]>([]);

  const [optimisticCart, optimisticAddToCart] = useOptimistic<Item[], Item>(
    cart,
    (state, item) => [...state, item]
  );

  const addToCart = async (formData: FormData, title) => {
    const id = String(formData.get('itemID'));
    // simulate an AJAX call
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setCart((cart: Item[]) => [...cart, { id, title }]);

    return { id };
  };

  return (
    <>
      <Cart cart={optimisticCart} />
      <AddToCartForm
        id="1"
        title="JavaScript: The Definitive Guide"
        addToCart={addToCart}
        optimisticAddToCart={optimisticAddToCart}
      />
      <AddToCartForm
        id="2"
        title="JavaScript: The Good Parts"
        addToCart={addToCart}
        optimisticAddToCart={optimisticAddToCart}
      />
    </>
  );
};

UI를 최적으로 업데이트하는 것은 웹 앱의 유저 경험을 향상시키는 좋은 방법이다. 이 훅은 이 사용 사례에 많은 도움이 된다. useOptimistic에 대한 자세한 내용은 React 문서에서 읽을 수 있다.

보너스: 비동기 전환

React의 Transition API는 UI 차단없이 상태를 업데이트할 수 있게 한다. 예를 들어, 사용자가 마음을 바꿀 경우 이전 상태 변경을 취소할 수 있다.

이 아이디어는 startTransition를 호출해 상태 변화를 감싼다.

function TabContainer() {
    const [isPending, startTransition] = useTransition();
    const [tab, setTab] = useState('about');

    function selectTab(nextTab) {
        // instead of setTab(nextTab), put the state change in a transition
        startTransition(() => {
            setTab(nextTab);
        });
    }
    // ...
}

다음 예는 이 Transition API를 사용한 탭 네비게이션을 보여준다. "Posts"을 클릭한 다음 즉시 "Contact"를 클릭한다. 이로 인해 "Posts"의 느린 렌더링이 중단된다. "Contact" 탭이 즉시 표시된다. 이 상태 업데이트는 트랜지션으로 표시되기 때문에 느린 리렌더(re-render)는 사용자 인터페이스를 통제하지 않는다.

import { useState, useTransition } from 'react';
import TabButton from './TabButton';
import AboutTab from './AboutTab';
import PostsTab from './PostsTab';
import ContactTab from './ContactTab';

export function App() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <>
      <TabButton isActive={tab === 'about'} onClick={() => selectTab('about')}>
        About
      </TabButton>
      <TabButton isActive={tab === 'posts'} onClick={() => selectTab('posts')}>
        Posts (slow)
      </TabButton>
      <TabButton
        isActive={tab === 'contact'}
        onClick={() => selectTab('contact')}
      >
        Contact
      </TabButton>
      <hr />
      {tab === 'about' && <AboutTab />}
      {tab === 'posts' && <PostsTab />}
      {tab === 'contact' && <ContactTab />}
    </>
  );
}

React 18.2에서는 Transition 훅을 사용할 수 있다. React 19의 새로운 점은 이제 비동기 기능을 지나 Transition을 시작할 수 있으며, React는 Transition을 시작하기를 기다리고 있다.

이는 AJAX 호출을 통해 데이터를 제출하고 그 결과를 트랜지션으로 렌더링하는 데 유용하다. 트랜지션의 pending 상태는 비동기 데이터 제출과 함께 시작된다. 이는 위에서 설명한 폼 actions 기능에서 이미 사용되고 있다. React가 startTransition으로 감싸진 <form action> 핸들러를 호출하여 현재 페이지를 차단하지 않는다.

이 기능은 아직 React 설명서에 문서화되어 있지 않지만 pull request에서 이 기능에 대한 자세한 내용을 읽을 수 있다.

결론

이러한 모든 기능들은 클라이언트 전용인 리액트 앱에서 작동하며, Vite와 함께 번들된 앱에서 작동한다. 비록 서버 통합형 리액트 앱에서도 이것이 작동하지만 이것을 사용하기 위해 Next 혹은 Remix와 같은 SSR 프레임워크를 사용할 필요는 없다. 

이러한 기능을 통해 리액트에서 데이터 패칭과 폼을 구현하기가 훨씬 쉬워진다. 하지만 훌륭한 유저 경험을 만들려면 이 모든 훅를 통합해야 하는데, 이는 복잡할 수 있다. 또는 최적의 빌트인 업데이트를 지원하는 사용자 친화적인 폼을 가진 react-admin과 같은 프레임워크를 사용할 수 있다.

이 기능들은 왜 React 18.3이 아닌 React 19에 도입되는 것일까? 이 기능들에는 약간의 변경 사항이 포함되어 있기 때문에 18.3 release에는 없을 것으로 보인다.

React 19는 언제 올 것인가 ? 아직 ETA는 없지만 이 게시물에 언급된 모든 기능은 이미 작동하고 있다. 하지만 아직 사용하는 것을 추천하고 싶지는 않다. (Next.js가 그렇게 한다고 해도) canary release를 프로덕트에 사용하는 것은 좋은 생각이 아니다.

리액트 코어 팀이 SSR 앱에서 일하는 사람들뿐만 아니라 모든 리액트 개발자들의 개발자 경험을 개선하기 위해 노력하고 있다는 것은 정말 기쁜 일이다. 또한 그들은 커뮤니티 피드백에 귀를 기울이고 있는 것 같다 - 데이터 패칭 및 폼 핸들링은 매우 흔한 문제이다.

나는 React의 Stable 릴리즈에 이 기능들이 보이길 기대한다!