React18 업데이트 내용

React18 업데이트가 된지도 벌써 어느덧 시간이 지났는데요. React18 버전이 대규모로 업데이트된 만큼 관련 내용을 요약해 보려고 합니다. 1. Concurrent Feature React18 업데이트의 가장 큰 변화는 동시성입니다. 동시성은 React가 우선순위 대기열 및 다중 버퍼링 같은 기술을 이용하여 동시에 여러 버전의 UI를 준비할 수 있도록 하는 새로운 메커니즘입니다. 동시에 여러 UI를 준비하기 때문에, 메인 스레드를 차단하지 않고 백그라운드에서 새 화면을 준비할 수 있습니다. 예를 들자면 UI가 대규모 렌더링 작업 중이더라도 사용자 입력에 즉시 응답이 가능하여 더 나은 유동적인 UX를 제공해 줍니다. Suspense 및 SSR 까지를 포함하여 React18의 새로운 기능들은 이를 활용하도록 구축되었습니다. 2. Automatic Batching 리액트 18버전에서 새롭게 추가된 Root API인 createRoot를 통해 배치 이벤트 지원 범위를 콜스택 에서 테스크 큐 까지 확장했습니다. 덕분에 비동기 이벤트 처리까지 배치처리가 가능해져 좀 더 효율적이고 빠른 렌더링이 가능해졌습니다. 만약 Automatic Batching 기능을 끄고 싶다면 flushSync 메서드를 사용합니다. 3. SSR 성능 개선 React18에서는, renderToPipeableStream 메서드의 추가로, streaming을 지원합니다. streaming 이란 리소스를 작은 덩어리로 나누어 순차적으로 받기 때문에 더 빠른 로딩이 가능한 기술입니다. 따라서 더 빠른 로딩 TTFB(Time To First Byte)이 가능해졌습니다. 4. Suspense 정식 Release Experimental이었던 Suspense가 정식 기능이 되었습니다. Suspense란, 아직 데이터가 준비되지 않은 컴포넌트가 있을 때 먼저 로딩 화면을 보여주고, 로딩이 완료되면 해당 컴포넌트를 보여주는 기능입니다. 그리고 pipeToNodeWritable API의 추가로 SSR에서도 Suspense를 사용할 수 있게 되었습니다. 5. 새로운 Hook - useId: 노드의 위치를 나타내는 base32 문자열로 생성되는 유니크한 아이디를 생성합니다. - useInsertionEffect: css-in-js 라이브러리가 렌더링 도중 스타일을 삽입할 때 성능 문제를 해결합니다. - useDeferredValue: DOM 트리에서 긴급하지 않은 부분의 렌더링 지연합니다. 즉 긴급한 렌더링을 반영한 이후에 렌더링을 시도합니다. - useTransition: 트렌지션 펜딩 상태 여부를 나타내는 값과, 트랜지션을 실행시킬 함수를 리턴하여 상태 업데이트를 긴급하지 않은 것으로 간주하는 관리가 가능합니다. 사용자의 입력이 업데이트 때문에 버벅이지 않도록 덜 급한 트랜지션으로 관리할 수 있습니다 - useSyncExternalStore: 외부 스토어에 대한 업데이트를 갈제로 동기화 하여 외부 스토어가 concurrent read를 지원할수 있습니다. 외부의 데이터를 읽고 구독할 때, 동시성 모드의 렌더링과 타임 슬라이싱을 병행하기 위한 방법을 지원합니다. 사용하는 라이브러리의 major 버전 업그레이드는 기능적, 성능적으로 개선이 되기 때문에, 늘 관심을 기울이는 것이 좋은데요. 이번 React18 업데이트는 동시성의 구현으로 고객이 더 나은 UX를 경험할 수 있게 된 측면에서 매우 의미가 큰 것 같습니다.