React 18 for App Developers 발표를 정리한 내용입니다. 이 발표에서는 다음과 같은 주제를 다룹니다.
- What's new in React 18?
- How to upgrade to React 18?
- Is it hard to upgrade an existing app?
React 18 에는 동시성 기능이 포함됩니다. 따라서 React 팀은 React 이전 버전 사용자들을 위해 Working Group을 구성했고 Shruti Kapoor는 Working Group의 멤버로써 이 발표를 통해 React 18이 갖는 의미를 전달합니다.
React 18에는 다음과 같은 기능이 나옵니다.
- Automatic Batching
- Suspense on the server
- New APIs for app and library developers
먼저 순서대로 우리는 Automatic Batching에 대해서 알아보려고 합니다.
function handleClick() {
setIsFetching(false);
setError(null);
setFormStatus('success');
}
위와 같은 handleClick 함수에서 이 함수가 실행되면 렌더링이 몇번 일어날까요?
한번 일어납니다. 이를 Batching이라고 합니다. (Multiple Rerendering을 피함.)
React 18 이전에 이벤트 핸들러가 아닌 다른 코드에서의 상태 업데이트는 Batching되지 않았습니다. 아래와 같은 코드 말이죠.
fetch('/something').then(() => {
setIsFetching(false);
setError(null);
setFormStatus('success');
})
즉 위와 같은 코드에서는 리렌더링이 세번 일어나게 됩니다. 이는 애플리케이션의 성능 저하로 이어지죠.
React 18은 이런 문제를 해결합니다. React 18에서는 렌더링이 마지막에 한번 일어납니다. 이벤트 핸들러 내부에서의 Batching 뿐만 아니라 언제든지 Batching을 합니다. (fetch, async await, setTimeout 등.. 아무데서나 Automatic Batching)
다음으로 Suspense(Suspense on the server, SSR)에 대해서 알아보겠습니다.
서버 사이드 렌더링은 React 컴포넌트의 HTML output을 서버에서 렌더링하여 클라이언트에게 전달하는 것입니다. 이렇게 전달하면 유저는 자바스크립트 번들이 로드되는동안 UI를 보고 있을 수 있습니다.(자바스크립트 번들이 로딩되기 전은 앱이 interative 하기 이전)
위와 같은 애플리케이션이 있다고 가정해봅시다. 애플리케이션에서 다른 모든 부분은 빠르게 로딩되는데 하나의 컴포넌트만 병목(bottleneck) 현상이 있습니다. 이 컴포넌트는 데이터를 느리게 로드할 수도 있고, 많은 자바스크립트 코드를 실행해야해서 느리게 로딩될 수도 있습니다.
React 18이전에서는 이 현상은 애플리케이션에서 병목으로 작용합니다. 하나의 컴포넌트가 전체 앱의 로딩을 느리게 만들 수 있기 때문입니다.
React 18 전까지 우리는 리액트에게 로딩시간이 오래걸리는 컴포넌트를 제외하고 다른 컴포넌트를 보내달라고 할 수 없었습니다. 모든 컴포넌트는 클라이언트에게 동시에 전달되어야 했죠.
이와 같은 all or nothing 현상을 서버에서의 Suspense를 통해 해결할 수 있습니다.(React 18)
<Suspense fallback={<Spinner />}>
<Comments />
</Suspense>
Suspense를 사용하면 애플리케이션에서 병목으로 작용하는 컴포넌트를 감싸서 그 부분을 Spinner와 같은 컴포넌트로 클라이언트에게 대신 보내줄 수 있습니다.
이제 로딩이 오래 걸리는 컴포넌트가 로드가 완료되면 완료된 부분을 클라이언트에게 전달합니다. 이렇게 하면 유저는 페이지를 빠르게 볼 수 있고 서버에서 로딩이 완료되는 순간 이전에는 로드되지 못했던 부분을 유저에게 보여줄 수 있습니다. (HTML Streaming)
이는 부분적으로 HTML을 전송하기 때문에 유저에게 인지된 로딩 시간이 감소하고 결국 좋은 User Experience를 유지할 수 있습니다.
Suspense on the server를 정리해보면 다음과 같습니다.
- One slow part doesn't slow down the whole page
- Show initial HTML early and stream the rest
- Code splitting fully integrated with server rendering
마지막으로 우리는 React 18에서 제공하는 새로운 API에 대해 알아보겠습니다.
concurrent features
- startTransition()
- useTransition()
- useDeferredValue()
mostly for libraries
- useId()
- useSyncExternalStore()
React 18 은 점진적 채택을 위해 설계되었고 버전을 업그레이드하는 것이 기존 버전의 애플리케이션을 망가뜨리지 않습니다.