React 19: 계륵이었던 Suspense가 활약할 때?

React 18의 Suspense 컴포넌트는 많은 주목을 받았긴 했지만, 정작 사용 사례는 거의 없다시피 하다.
그럴 만도 한게, 먼저, <Suspense> 문서를 보면,
이 컴포넌트를 공식 내에서 사용하는 사례는 아래에 해당한다고 되어 있다.

• Relay 및 Next.js 처럼 데이터를 가져오기 위해 사용 가능한 경우
• lazy 를 사용해 컴포넌트를 후에 불러오는 경우
• use 훅을 사용해 Promise 를 사용할 경우

그러하다. 이것만 봐도 계륵 그 자체임을 알 수 있다. 특히 3번째 같은 경우는 18에 추가된 게 아니라 19에 추가될 훅 함수이니,
즉, <Suspense> 컴포넌트를 사용할 곳은 거의 1번에 명시된 타사 라이브러리를 사용할 때가 그나마 많다는 것이다.
2번의 경우 잘 쓰지 않으니 말이지.

하지만, 이제 19 버전부터는 겨우 use 훅 함수 하나 때문에 계륵에서 벗어날 때가 온 것이다.
대체 계륵에서 벗어나게 할 이 use 훅이 뭐길래?

use 훅 함수

use 훅 함수는 React 18 나오기 전부터 거론될 정도로 꽤 오래된 이슈였다. 그러나, 18에서는 빠졌다.
그랬던 이 훅 함수는 드디어 React 19 에서부터 사용 가능해질 예정이고, 이제 리액트 19 베타가 나왔으니,
드디어 <Suspense> 컴포넌트가 빛을 발할 때가 온 것이다.

그러면, use 훅 함수는 어떻게 쓰는 것이냐,
공식 문서에서는 이 훅을 사용하는 경우가 크게 두 가지로 나뉜다.

• Promise 우오오오오오오오오오오ㅗㅇㅇ오오오오옹ㅇㅇㅇ옹ㅇ
• Context 가져오기 (어? useContext는?)

드디어 우린 약속할 수가 있어. 이거 하나만 해도, 여태까지 Promise 쓰기 위해 개고생해가면서 타사 라이브러리를 써야 했던 고생을 줄일 수가 있게 됐다.
하지만, Promise 를 사용하게 된다는 건, 결국 <Suspense> 사용이 반강제된다는 뜻이기도 하다.
즉, 이게 있다고 해서 Tanstack Query (아 시발 react-query 라고 훈수두는 새끼들 많네)같이 타 라이브러리가 꼭 쓸모 없어지는 게 아니라는 소리.

use 훅 함수는 꽤 특이한 훅 함수인데, if 문 및 for 문에 사용할 있는 유일한 훅 함수이다.

export function Modal({ show, children }) {
  if (show) {
    const theme = use(MyThemeContext);
    return <dialog className={theme.css.dialog}>{children}</dialog>
  }
  
  return false;
}

export function ProductList({ typeId }) {
  const list = use(fetchProductList(typeId));
  
  // list.map 같은 함수는 콜백 내 컨텍스트가 달라지므로 for문을 쓸 것!
  for (let i = 0; i < list.length; i++) {
    const item = use(fetchProductDetail(list[i].productId));
    if (item.enabled) {
      list[i] = <li>상품명: {item.name}</li>
    } else list[i] = false;
  }
  
  return <ul>{list}</ul>;
}

만약, <Suspense> 없이 use 훅 쓴 컴포넌트 부르려 한다면, 얘가 왜인지 희한~하게 서버 컴포넌트로 오해하고 오류를 발생시킨다.

여기 React 19 베타 사용한 예제를 심혈 기울여 만들어 놨으니 가지고 놀도록.

예제 작성하고 나니 왠지 계륵 삘 난다? 아무렴 어떤가, 어쨌든 React가 공식적으로 Promise 사용 가능한 길을 열어준 게 어디인가.
근데, 솔직히 나같으면 서버 컴포넌트 마렵다...

뭐? 일단 데이터 비동기로 가져왔으니 이제 변경은 어떻게 하나고? 이벤트 뒀다 뭐하게. 그리고, 서버 액션도 생기는데 뭔 걱정?

결론

벌써 결론이야? 시시하게? 맞다. 오늘 준비할 게 이게 다다. 나도 허무하지만 더 할 말이 없다.
기대 반 우려 반인가? 사실 게임 체인저 까지는 아닐 것이다. 기존에 Tanstack Query 쓰고 싶으면 더 써도 된다.
왜냐, Tanstack Query 는 비동기 상태 경우를 더 유연하게 관리할 수 있기 때문이다.
<Suspense> 컴포넌트는 불러오는 중과 완료인 컨텐츠만 부를 수 있고, 오류에 대해서는 <ErrorBoundary> 컴포넌트를 써야 한다.
이는 리액트 공식 문서에 소개한 사항이다. 깔아도 되고, 쉽게 구현 가능하니 직접 구현해서 써도 된다. 선택은 자유.

아 시발 직접 쓰고나니 찐 계륵이네.

끗.