미리보는 리엑트 18 의 변화..!

Yeongjong Kim·2022년 3월 22일

본 문서는 2022/03/21 기준 https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html 에서 발췌하였습니다. Release Candidate 단계 내용을 작성하였기 때문에 변경될 가능성이 있습니다.

1. render APIs 추가

동시성을 지원하는 두가지 렌더 API가 추가되었고 그에 따라 ReactDOM.render는 deprecated될 예정이다. react-18 관련된 자료를 살펴보면 react 팀원들은 이미 ReactDOM.render를 lagacy라고 부릅니다...😮

createRoot: CSR에서 동시성을 지원하는 API
hydrateRoot: SSR에서 동시성을 지원하는 API(기존 hydrate API의 연장)

1.1 (중요) concurrent feature 동시성 기능에 대해

점진적인 변화를 위해 Legacy, Blocking, Concurrent 3가지 모드가 제안되었지만, React 18에서 동시성 모드가 아닌 동시성 기능이라고 언급했습니다. React 18은 점짐적 변화가 아닌 큰 변화로 다가올 듯 합니다.

1.1.1 React의 concurrent 정의: React App이 사용자 네트워크 환경 혹은 디바이스 성능에 따라 지연되는 응답 상황에 적절히 반응하도록 도움을 주기 위한 기능 집합입니다.

Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.

1.1.2 * 렌더링 프로세스 중단

1000개의 데이터를 다루는 컴포넌트가 있습니다. 상태가 변경되고 1000개의 데이터 모두 재 렌더링 해야한다면 오래걸리는 렌더링 시간에 의해 버벅임이 발생합니다. 이 버벅이는 과정에서 사용자는 차단 상태에 빠지게됩니다. 즉, 18 버전 이전에는 시작된 렌더링을 중단할 수 없었고 이를 리엑트 팀은 "blocking rendering" 이라 부르고 있습니다.

Concurrent에서는 더 이상 다음 렌더링이 차단되지 않습니다. 즉 현재 진행중인 렌더링 프로세스를 중단할 수 있습니다.

Interruptible Rendering(인터럽트 렌더링)
리엑트 팀은 중단 가능한 렌더링을 "Interruptible Rendering"라고 부릅니다. 이는 차단된 상태에서 사용자의 입력이 일어나면 발생할 다음 렌더링을 임시로 차단할 필요가 없다는 점에서 조금 더 부드러운 사용자 경험을 제공합니다. 이에 대한 예시는 공식문서로 대체합니다.

1.1.3 * Intentional Loading Sequences(Bad 로딩 상태를 다루는 기능 추가)

로딩 화면이 길어지면 사용자 이탈률이 증가합니다. 18 버전에서는 로딩화면을 조금 더 유연하게 다루는 방법을 제시하고 있습니다. 그 방법은 old screen을 조금 더 오래 유지하여, 로딩 화면 비중을 줄이는 것입니다.

이 새로운 기능이 Concurrent에 탑제되었습니다. 변화된 Suspense와 새롭게 탑제된 useTransition을 살펴보면 로딩 비중을 유연하게 대처할 수 있습니다. 해당 내용은 다음 포스트에서 다루겠습니다.

이 것이 가능한 이유는 React가 메모리에서 새로운 화면을 준비하기 때문에 다음 화면이 준비되기 전까지 현재 화면을 유지할 수 있다고 설명합니다. 심지어 streaming 방식에 의해 데이터를 일부분만 응답받은 상황에서도 렌더링을 즉시 시작합니다. 개인적으로 이해한 바는 백그라운드 프로세스 처럼 내부적으로 멀티 프로세스와 같은 데이터 처리가가 동작한다고 비유할 수 있을 것 같습니다. CS 지식이 있다면 시분할을 떠올리고 generator를 통해 task(함수)를 번갈아가며 연속해서 실행한다고 생각하는게 더 정확합니다. 결국 상태가 변경되면 다음 화면을 그리는 로직이 별도로 분리되어 실행되고 있다고 이해하면 좋을 것 같습니다. 이에 대한 자세한 내용은 https://reactjs.org/docs/concurrent-mode-intro.html 를 참고해 주세요.

2. Server Rendering APIs의 업데이트

Node 환경에서 사용되는 Server Rendering APIs 업데이트 와 그 외 몇 APIs에 대한 이슈가 있습니다.

이 부분에 대해서는 아직 사용해본 경험이 없어 추후에 작성하도록 하겠습니다.

renderToNodeStream(Deprecated): 자료 조사 필요
renderToPipeableStream: renderToNodeStream를 대체하는 새로운 API
renderToReadableStream: New
renderToString: Limited
renderToStaticMarkup: Limited
renderToStaticNodeStream: -

3. Automatic Batching(일괄 업데이트)

여러 상태를 변경하는 경우 성능 우위를 점하기 위해 일괄적으로 렌더링하는 기능입니다. 리엑트 18 이전 버전에서는 이벤트 핸들러에서 실행되는 상태 변경만 일괄 업데이트가 되었지만, 리엑트 18 버전 부터는 Promise, setTimeout 등 모든 경우 일괄 업데이트가 기본으로 적용됩니다.

일괄 업데이트를 피하기 위해 flushSync API를 제공합니다. (flushSync는 18 버전에 새로 등장한 기술은 아닙니다.)


function handleClick() {
  flushSync(() => {
    setCounter(c => c + 1);
  });
  // React has updated the DOM by now
  flushSync(() => {
    setFlag(f => !f);
  });
  // React has updated the DOM by now
}

4. 라이브러리를 위해 새롭게 등장한 APIs

useId: unique ID를 생성하는 새로운 훅입니다. 이 훅이 중요한 이유는 SSR에서 hydration이 발생할 때 client와 server 사이의 렌더링 결과에 불일치할 수 있고 이때 적용되는 고유 ID가 달라질 수 있기 때문입니다. 17버전에서 같은 이슈로 useOpaqueIdentifier 훅을 사용했지만, 몇몇의 버그가 존재해 개선된 버전인 useId 훅이 새롭게 출시되었습니다. react 18에서는 streaming 방식을 사용하는 server renderer가 HTML을 순서 없이 전달하기 때문에 여기서 발생하는 오류를 해결하기 위한 용도로 중요한 역할을 담당합니다.
useSyncExternalStore: 아직 자료 조사가 필요한 API 입니다.
useInsertionEffect: CSS-in-JS 라이브러리가 inline style을 삽입하는 방식에서 발생하는 성능 문제를 해결할 수 있는 새로운 훅입니다. 자세한 사항은 이곳을 참고해주세요.

동시성을 위한 startTransition, useDeferredValue 새로운 훅도 출시 되었습니다. 이 부분은 다음 포스트에 공유하도록 하겠습니다.

5. 엄격 모드 업데이트

이 부분에 대해서는 자료조사가 더 필요합니다.

앞으로 React는 특수한 상황(뒤로가기 등)에 상태를 유지하여 보관중인 UI 섹션을 삽입하고 삭제하는 기능을 추가하려는 조짐이 보입니다. 18버전에서 이에 도움을 주는 새로운 개발 전용 엄격 모드를 소개하고 있습니다. 핵심은 첫 번째 마운트시, 이전에 보관했던 상태가 있다면 상태를 복구하는 두번째 마운트를 실행합니다.

참고: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode

6. IE 지원 중단

드디어...!! React 18은 IE 브라우저로 Polyfill이 불가능한 기능을 사용했으며, 2022.06.15 기준 중단되는 IE 브라우저에 대해 지원하지 않겠다고 언급했습니다.

다음 스텝

Suspense for Data Fetching describes a new mechanism for fetching data in React components.
Concurrent UI Patterns shows some UI patterns made possible by Concurrent Mode and Suspense.