React : V18 장점, 이점: 포괄적인 가이드

React v18의 세 가지 주요 기능인 서버의 자동 배치, 전환 및 서스펜스에 대해 설명합니다.

리액트 v18은 2021년부터 회자되어 마침내 출시되었습니다. React v18은 성능과 사용자 경험을 향상시킬 수 있는 흥미로운 새로운 기능을 제공합니다. 이 릴리스의 주요 강조점은 동시 모드, 새로운 후크, 리액트의 엄격한 모드 API의 개선점입니다.

Resacton 2022 컨퍼런스에서 Shruti Kapoor가 제시한 표를 기반으로 구성되었습니다. React v18의 세 가지 주요 기능인 자동 배치, 전환 및 서버의 서스펜스를 다룹니다. 또한 동시성의 개념과 React DOM Client and Server에 도입된 새로운 API에 대해서도 다룰 것입니다. 마지막으로, useId 및 useTransition을 포함하여 React v18에서 사용할 수 있는 새로운 후크도 소개할 예정입니다.

 

 

특징들

새로운 React 버전에서는 여러 상태 업데이트를 하나의 리렌더로 결합하는 자동 배치, 긴급 업데이트와 긴급하지 않은 업데이트를 구분하는 전환, 느리게 렌더링되는 구성 요소에 대해서도 성능을 향상시키는 서버 서스펜스와 같은 기능에 액세스할 수 있습니다.

 

자동 배치 – 최소 재렌더링을 통해 성능 최적화

자동 배치 – 최소 재렌더링을 통해 성능 최적화

 

슈루티 카푸어는 리액트의 '자동 배치' 개념을 설명하기 위해 식료품 쇼핑의 예를 사용합니다. 이것은 요리에 필요한 모든 품목의 목록을 만들고 그것들을 여러 번 여행하는 대신 한 번에 식료품점으로 가져오는 것을 의미합니다. 반응에서 배치는 여러 상태가 변경될 때 발생하는 리렌더(트립)의 수를 줄이는 것을 말합니다.

이전에는 API 호출 또는 약속과 같은 이벤트 핸들러 외부에서 발생한 상태 업데이트가 일괄 처리되지 않았습니다. 그래도 React v18을 사용하면 약속 내, setTimeout 및 이벤트 콜백을 포함한 모든 상태 업데이트를 자동으로 배치할 수 있습니다. 따라서 React가 백그라운드에서 수행해야 하는 작업량이 상당히 줄어듭니다.

자동 배치는 앱을 마운트할 때 렌더 방법 대신 createRoot을 사용하는 경우에만 사용할 수 있습니다. 자동 배치를 사용하지 않으려면 flushSync를 사용하여 옵트아웃할 수 있습니다.

 

 

전환 – 지연된 로드로 사용자 환경 개선

전환 – 지연된 로드로 사용자 환경 개선

 

React에는 긴급 업데이트와 긴급하지 않은 업데이트를 구분하는 "전환"이라는 새로운 개념이 있습니다. 전환 업데이트는 사용자가 한 보기에서 다른 보기로 긴급하지 않은 방식으로 전환할 때 UI를 변경하는 반면, 긴급 업데이트는 직접적인 사용자 상호 작용(클릭, 입력 등)에 대한 즉각적인 응답입니다

useTransitionhook 또는 startTransition 메서드는 전환을 시작하며, 이는 낮은 우선순위 업데이트로 간주됩니다. 클릭 또는 키 누르기와 같은 긴급 업데이트가 더 발생하면 해당 업데이트는 중단됩니다. 사용자가 여러 문자를 빠르게 연속해서 입력하여 전환을 중단하는 경우, React는 가장 최근의 업데이트만 렌더링하고 완료되지 않은 이전 렌더링 작업을 무효화합니다.

전환은 렌더링 속도가 느리거나 네트워크 속도가 느린 상황에서 사용할 수 있습니다. 느린 렌더링의 경우 React는 상당한 양의 작업을 수행하며, 업데이트를 전환으로 표시하면 프로세스를 최적화하는 데 도움이 됩니다. 네트워크 속도가 느린 경우 React는 UI를 동결하지 않고 네트워크의 데이터를 기다릴 수 있어 사용자 환경이 개선됩니다.

 

 

서버에 대한 서스펜스 – 서버 측 데이터 로드에 대한 서스펜스 활용

서버에 대한 서스펜스 – 서버 측 데이터 로드에 대한 서스펜스 활용

 

React v18은 서버 측 렌더링의 성능과 사용자 경험을 향상시키는 "서버의 서스펜스"를 도입했습니다. 개발자가 구성요소를 더 작은 조각으로 분할하고 독립적으로 로드할 수 있는 서스펜스가 포함된 코드 분할을 통해 초기 로드 시간을 단축하고 서버와 클라이언트 모두에서 리소스 사용을 줄일 수 있습니다. 서버의 스트리밍 렌더링은 전체 페이지의 렌더링이 완료될 때까지 기다리지 않고 사용 가능한 즉시 클라이언트로 초기 HTML을 전송합니다. 이렇게 하면 사용자가 페이지의 초기 내용을 더 빨리 볼 수 있기 때문에 사용자 환경이 더 빠르고 원활해집니다.

React v18에서 데이터 가져오기를 위한 서스펜스는 릴레이, Next.js, Hydrogen 또는 Remix와 같은 유력한 프레임워크에서 사용될 수 있습니다. 그러나 프레임워크 없이 서스펜스 데이터 가져오기를 사용하는 것은 현재 권장되지 않습니다. 리액트는 서스펜스로 데이터에 접근할 수 있는 추가 도구를 미래에 제공할 가능성을 모색하고 있지만, 도서관과 프레임워크는 계속해서 중요한 역할을 할 것으로 생각됩니다.

 

 

개념

동시성 – 성능 및 사용자 환경 최적화

동시에 여러 버전의 UI를 준비할 수 있는 새로운 메커니즘인 "Concurrent React" 동시성은 기능 자체가 아니라 Sussion 및 new startTransition()과 같은 새로운 기능과 DelferredValue() API 등을 사용할 수 있는 이면 구현 세부 정보입니다.

React v18 이전에는 렌더 트랜잭션이 항상 단일, 중단되지 않고 동기화되어 프로세스를 중단할 수 없었습니다. 이 새로운 기능을 통해 React는 필요한 경우 렌더를 일시 중지, 재개, 중단 또는 포기할 수 있습니다. 즉, 동시성입니다. 작업이 길면 일시 중지하고 다른 작업으로 전환하여 완료한 다음 계속할 수 있습니다. 이를 통해 React가 복잡한 렌더링 작업 중인 경우에도 사용자의 응답성을 높일 수 있습니다.

 

API

DOM 클라이언트 대응

다음과 같은 새로운 API가 react-dom/client에 도입되었습니다:

 

루트 생성

렌더링 또는 마운트 해제를 위한 루트를 만드는 새로운 방법입니다. ReactDOM.render 대신 사용해야 하며 React v18의 동시 기능을 활성화합니다.

 

하이드레이트 루트

이것은 서버 렌더링 응용프로그램을 수화시키는 새로운 방법입니다. ReactDOM.hydrate 대신 새로운 ReactDOM Server API와 함께 사용해야 합니다.

 

DOM 서버 대응

renderToPipeableStream API는 노드 환경에서 사용하도록 특별히 설계된 반면 renderToReadableStream API는 Deno 및 Cloudflare Workers와 같은 최신 에지 런타임 환경에 최적화되어 있습니다. 기존 renderToString 메서드는 계속 작동하지만 사용은 권장되지 않습니다.

 

훅스

useId

UseId는 클라이언트와 서버에서 고유한 ID를 생성하는 동시에 ID 값을 수동으로 관리하고 렌더링 간의 일관성을 보장하는 새로운 후크입니다.

 

useTransition

React v18의 useTransition(전환) 및 startTransition(시작 전환) 후크는 상태 업데이트를 긴급 업데이트와 긴급하지 않은 업데이트의 두 가지 범주로 분류합니다. 기본적으로 상태 업데이트는 긴급한 것으로 간주되지만 이러한 후크를 사용하여 특정 상태 업데이트를 긴급하지 않음으로 표시할 수 있습니다. 즉, React는 텍스트 입력 업데이트와 같은 중요 업데이트의 우선 순위를 지정하고 검색 결과 목록 렌더링과 같이 긴급하지 않은 업데이트를 중단할 수 있습니다.

 

useDerferredValue 

useDerferredValue 후크를 사용하면 중요하지 않은 구성 요소의 렌더링을 지연할 수 있습니다. 디바운스 또는 조절과 달리 설정된 시간 지연은 없습니다. 즉, React는 첫 번째 렌더가 화면에 나타나는 즉시 지연된 렌더를 시도합니다.

 

 

결론

결론적으로 React v18.0은 성능과 사용자 경험을 향상시키기 위해 많은 흥미로운 개선점을 제공합니다. 동시 모드가 도입됨에 따라 동시성의 개념은 React의 응답성과 사용자 친화성을 높일 수 있었습니다. 또한 서버의 자동 배치, 전환 및 서스펜스는 React가 성능을 최적화하고 동시에 여러 버전의 UI를 준비하여 서스펜스 및 새 API와 같은 새로운 기능을 사용할 수 있도록 하는 주요 기능입니다. React v18의 도입으로 개발자는 더 빠른 렌더링, 최적화된 성능 및 향상된 사용자 경험을 활용할 수 있습니다.