React 18 에서 추가된 기능

React 18 이 예고한 변화 중 Suspense 를 중심으로 정리한 글이다. 로딩 상태를 컴포넌트마다 분기하던 기존 패턴이 왜 반복 코드를 낳는지 코드로 보인 뒤, Suspense 가 그 두 가지 문제를 어떻게 분리하는지 단계별 예제로 이어간다.

핵심 포인트

React 18 은 기본 제공 개선(automatic batching 등), 새 API(startTransition 등), React.lazy 를 지원하는 스트리밍 서버 렌더러를 포함한다.
이를 가능하게 하는 것이 새 opt-in 메커니즘인 '동시 렌더링' 으로, React 가 여러 버전의 UI 를 동시에 준비할 수 있게 한다.
대부분 눈에 보이지 않는 변경이라 페이스북도 최소한의 코드 추가만으로 업그레이드했다고 밝힌다.
기존 방식의 문제는 둘이다. 데이터를 읽는 일과 로딩 상태로 컴포넌트를 렌더하는 일이 한 컴포넌트에 섞여, 모든 데이터마다 분기 처리를 해야 한다.
Suspense 는 이 둘을 분리한다. `<Suspense fallback={<Spinner/>}>` 아래의 무언가가 아직 준비되지 않으면 fallback 을 대신 보여준다.

상세 정리

Suspense 자체는 2018년에 발표됐지만 코드 스플리팅용 `React.lazy` 에 한정된 제한적 기능이었고, 18 에서 대폭 확장됐다.
문제 제기의 출발점은 React 의 장점이 상태를 위에서 아래로 읽어 내려가는 데 있다는 점이다. 중간에 비동기가 끼면 그 흐름이 끊긴다.
기존 대응: `useState` 와 `useEffect` 로 데이터를 채우고, 로딩용 state 를 따로 만들거나 HOC·커스텀 훅으로 감싸 왔다.
두 번째 문제는 로딩 방식이 바뀌면 수정 범위가 커진다는 점이다. 로딩이 두 개인데 하나로 합치고 싶으면 상태를 위로 올리거나 `Promise.all` 로 묶어야 한다.
Suspense 적용 후에는 컴포넌트가 `const items = useData(id)` 로 데이터만 읽고 로딩 상태를 신경 쓰지 않는다.
배치 패턴 ①: `<Header/>` 와 `<List/>` 를 하나의 Suspense 로 감싸면 모든 UI 요소가 준비됐을 때 한 번에 렌더된다.
배치 패턴 ②: 안쪽에 Suspense 를 중첩하면 Header 가 먼저 렌더되고 하위는 `ListPlaceHolder` 를 보여주다 준비되면 렌더된다.
효과: 로딩 순서를 JSX 구조만으로 조정할 수 있어, 디자이너가 로딩 모양이나 데이터 그룹을 바꾸자고 할 때도 대응이 쉽다.
결론은 그동안 반복해 온 `&&` 분기와 `isLoading` 처리에서 벗어날 수 있겠다는 기대로 맺는다.