! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

React 18의 새로운 기능 > 인사이트

본문 바로가기

MESCIUS 커뮤니티

인사이트 - IT&개발 정보

IT&개발 정보 React 18의 새로운 기능

페이지 정보

작성자 GrapeCity 작성일 2021-08-18 10:22 조회 3,265회 댓글 0건

본문

React 팀은 이번 주 초에 React 18의 초기 프리뷰가 실행 중이며 React 18 릴리즈 작업이 시작됐다고 발표했습니다. 이것은 알파 릴리스이며 생산에 적합하지 않지만 테스트와 피드백이 권장됩니다.


이제 라이브러리 작성자가 React 18을 사용해 보고 공식 릴리스 이전에 의견과 방향을 제시할 수 있는 시기입니다. 주요 목표는 기존 응용 프로그램과 라이브러리를 사용하여 React 18을 원활하고 점진적으로 채택할 수 있는 생태계를 준비하는 것입니다.


React 18의 좋은 소식


React 18 업그레이드는 큰 코드 변경이 필요하지 않습니다! 좋은 소식에 기뻐해야 할 겁니다. 업그레이드로 얻을 수 있는 거의 모든 이점은 코드를 변경이 필요 없습니다.


React 18 주요 사항 | UX, 내부 아키텍처 등


React 18는 즉시 사용 가능한 개선 사항(automatic batching), 새로운 API(startTransition)와 기본 제공 new streaming server renderer을 포함하여 지원(React.lazy)합니다.


React 18에는 React 서버 측 렌더링(SSR) 성능을 위한 아키텍처 개선도 포함됩니다.


새 옵트인 메커니즘이 있나요?


동시 렌더링(새 옵트인 메커니즘)과 React는 동시에 여러 버전의 UI를 준비합니다. 이러한 변화는 주로 이면에서 이루어지지만, 응용 프로그램의 실제로, 인지되는 성능을 향상시킬 수 있는 새로운 가능성을 열어줍니다.


React 18의 동시성은 옵트인이므로 컴포넌트 동작에 대한 중요하고 즉각적인 변경 사항은 없습니다. 일반적인 주요 React 릴리스와 달리 응용 프로그램 코드를 최소로 변경하거나 전혀 변경하지 않고 React 18로 업그레이드할 수 있습니다. React의 작업팀에 따르면, 많은 사용자들이 오후 1시 이내에 업그레이드를 마칠 수 있을 것이라고 합니다.


새 루트 API


이 ReactDOM.render()를 이제 Legacy Root API라고 합니다. React 17과 같은 방식으로 작동합니다. 계속 사용할 수는 있지만 나중에는 더 이상 사용되지 않습니다.


새 루트 API

새 루트 api


이전 루트 API와 매우 비슷합니다. React 18에서는 ReactDOM.createRoot를 사용합니다.


React 18 루트 API 변경은 다음을 의미합니다.

  • hydrate 메서드 및 렌더링 콜백이 사라졌습니다.

  • 이제 createRoot 옵션이 있습니다.


새 루트 API로 전환하면 React 18과 함께 제공되는 새로운 개선 기능이 자동으로 제공됩니다. 이는 클라이언트를 React 18로 업그레이드하기 위해 해야 할 모든 작업입니다. React 클라이언트 측만 사용하는 경우 완료되었습니다.


startTransition API


새 API는 웹페이지 응답성에 도움이 됩니다. startTransition은 현재 웹페이지의 응답성을 유지하고 동시에 많은 비차단 UI 업데이트를 수행할 수 있습니다.


사용자가 검색 상자에 입력하면 입력 값이 즉시 업데이트되는 반면, 연구 결과는 몇 밀리초 정도 걸립니다. API를 통해 빠른 업데이트와 지연된 업데이트를 구분할 수 있습니다.


지연된 업데이트를 전환 업데이트라고 합니다. Rich UI 또는 긴급하지 않은 업데이트를 startTransition로 다음과 같이 처리할 수 있습니다.


startTransition API


서버 측 렌더링 향상된 기능


React 18은 서스펜스를 완벽하게 지원합니다. 기억하시겠지만, React 16은 완전한 지원은 아니었습니다.

서스펜스는 상태 전환(지연된 전환) 이전에 데이터가 해결되기를 기다리고, 데이터 로드 중 UI 충돌을 줄이고(자리 표시자 스로틀링), 순서대로 스트리밍하여 컴포넌트 집합의 모양을 조정할 수 있는 기능 집합입니다(SuspenseList).


React 18을 사용하면 React 컴포넌트를 더 작은 청크로 나눌 수 있습니다.


타임라인


구체적인 출시 일자는 예정되어 있지 않지만 앞으로 몇 달간 무언가를 기대해야 합니다.

  • 라이브러리 알파: 2021년 6월 사용 가능

  • 퍼블릭 베타: 2021년 6월(몇 개월 추가)

  • RC(릴리스 후보): 베타 릴리스 후 몇 주

  • 일반 제품 구입 정보: RC 이후 몇 주


알파, 베타, 감마?


알파


초기 미리보기입니다. 대부분의 기능은 안정적이지만 useMutableSource, useOpaqueIdentifier 및 스타일시트를 포함한 새 API를 완성하기 위한 작업이 진행 중입니다.


베타


React 18 기능이 완료되면 React 18 베타가 공개됩니다. 베타 버전에는 최종 릴리스의 모든 변경 사항과 새로운 기능이 포함되어 있습니다. 베타는 또한 더 큰 커뮤니티(라이브러리 작성자 외)가 React 18을 사용해보고 피드백을 제공하며 남아 있는 문제를 보고하는 시기이기도 합니다.


RC


React 18이 완전한 기능을 갖추고 릴리스 안정성에 확신이 있으면 릴리스 후보가 됩니다.


Stable


React 18이 릴리스될 수 있습니다!


React + GrapeCity


GrapeCity는 모든 React 버전에 대한 지속적인 지원을 위해 노력하고 있습니다. 공식 커뮤니케이션을 다시 확인하십시오. 수많은 GrapeCity 제품이 처음부터 React를 지원했습니다.

GrapeCity는 최신 버전에 맞게 제품을 계속 테스트하고 업그레이드할 것입니다. 이러한 제품에는 다음이 포함됩니다.

  • ActiveReportsJS: 쉽고 가벼운 웹 애플리케이션용 JavaScript 리포팅 솔루션

  • SpreadJS: 글로벌 No1. 450개 이상의 Excel 기능이 포함된 JavaScript 스프레드시트 컴포넌트

  • Wijmo: 차트, 그리드, 입력 등을 포함하는 고성능 JavaScript UI 컴포넌트

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.