React 기능, 지원 중단 및 주요 변경 사항 살펴보기-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

React 기능, 지원 중단 및 주요 변경 사항 살펴보기

Barbara Streisand

Dec 10, 2024 pm 08:22 PM

Exploring React Features, Deprecations, and Breaking Changes

풍부한 새로운 기능, 개선 사항, 획기적인 변화를 제공하는 React 19가 출시되었습니다. 이 릴리스에서는 레거시 API를 더 이상 사용하지 않는 동시에 개발자가 상태 관리, 양식 및 서버 측 렌더링을 처리하는 방법을 재정의합니다. 업그레이드할 계획이라면 버클을 채워 혁신적인 여정을 떠나세요. 이 가이드는 원활한 전환을 보장하는 팁과 함께 React 19의 주요 내용을 안내합니다.

React 19의 주요 특징

새로운 기능

1. 액션 및 useActionState

startTransition API는 이제 '작업'이라는 비동기 기능을 지원합니다. 작업은 상태 업데이트를 관리하고, fetch()와 같은 부작용을 처리하고, 오류 처리를 포함할 수 있습니다. 조정된 상태 업데이트 및 UI 렌더링을 통해 전환을 간소화합니다.

새로운 useActionState 후크는 보류 및 최종 상태를 포함한 작업 상태에 대한 액세스를 제공하여 이를 보완합니다. 세분화된 제어를 위해 리듀서를 허용하므로 양식 상호 작용 및 복잡한 상태 흐름에 필수적인 도구입니다.

2. Optimistic을 사용한 낙관적 업데이트

useOptimistic을 사용하면 개발자가 전환이 진행되는 동안 임시 상태 변경을 설정하여 보다 원활한 사용자 환경을 제공할 수 있습니다. 비동기 작업이 완료되면 상태가 자동으로 되돌아가거나 업데이트됩니다.

3. API 사용

React 19에서는 렌더링 중에 Promise나 컨텍스트를 읽을 수 있는 use API를 도입했습니다. 이는 서버 데이터 가져오기 워크플로를 단순화할 수 있지만 use는 렌더링 함수 내에서만 호출할 수 있다는 제한이 따릅니다.

4. 소품으로 참조

이제 ref를 props로 직접 전달할 수 있으므로 앞으로 Ref가 필요하지 않습니다. 이러한 변경으로 인해 구성요소 구성이 단순화되고 참조 작업이 더욱 직관적이게 되었습니다.

5. 향상된 서스펜스

Suspense는 이제 형제가 일시 중단되면 즉시 대체 구성 요소를 커밋하는 형제 사전 준비를 지원합니다. 이 향상된 기능은 데이터 집약적인 애플리케이션의 성능과 사용자 경험을 향상시킵니다.

React DOM 클라이언트 개선

1. 양식 작업

React의 양식은

를 사용하여 useFormStatus와 더 나은 통합을 가능하게 합니다. 양식을 제출하면 제어되지 않는 구성 요소의 상태가 자동으로 재설정됩니다.

2. 문서 메타데이터 및 리소스 최적화

React 19는 기본적으로

과 같은 문서 메타데이터 렌더링을 지원합니다. 또는 태그, 구성 요소 트리에 있습니다. 또한 preinit, preload 및 preconnect와 같은 새로운 API는 리소스 검색 및 로드 시간을 향상시킵니다. <h4> 3. <strong>비동기 스크립트</strong> </h4> <p>이제 구성 요소 트리 어디에서나 비동기 스크립트를 렌더링할 수 있습니다. React는 순서 지정 및 중복 제거를 처리하여 타사 스크립트 통합을 간소화합니다.</p> <hr> <h3> <strong>React DOM 서버</strong> </h3> <h4> 1. <strong>새로운 Prerender API</strong> </h4> <p><strong>prerender</strong> 및 <strong>prerenderToNodeStream</strong> API는 Node.js와 같은 스트리밍 환경을 지원하여 서버 측 렌더링(SSR)을 향상합니다. 이러한 API는 HTML을 생성하기 전에 데이터 로딩을 기다리므로 SSR이 더욱 강력해집니다.</p> <h4> 2. <strong>안정적인 React Server 구성 요소(RSC)</strong> </h4> <p>이제 서버 구성 요소가 안정적이므로 라이브러리가 React 19를 피어 종속성으로 타겟팅할 수 있습니다. 이는 전체 스택 React 아키텍처와 일치하며 Next.js와 같은 프레임워크와 원활한 통합을 가능하게 합니다.</p> <hr> <h3> <strong>지원 중단 및 주요 변경 사항</strong> </h3> <h4> <strong>지원 중단</strong> </h4> <ul> <li> <strong>element.ref 액세스</strong>: element.props.ref로 인해 더 이상 사용되지 않습니다.</li> <li> <strong>react-test-renderer</strong>: 지원 중단 경고를 기록합니다. React Testing Library로 마이그레이션하는 것을 고려해 보세요.</li> <li> <strong>레거시 API</strong>: contextType, 함수용 defaultProps, 문자열 참조와 같은 API는 공식적으로 더 이상 사용되지 않습니다.</li> </ul> <h4> <strong>획기적인 변화</strong> </h4> <ol> <li><p><strong>JSX 변환 요구 사항</strong><br> 새로운 JSX 변환은 React 19에서 필수입니다. 이를 통해 참조와 같은 기능을 props로 활성화하고 전반적인 성능을 향상시킬 수 있습니다.</p></li> <li><p><strong>변경사항 처리 오류</strong><br> 포착되지 않은 오류는 이제 window.reportError에 보고되고, 경계에서 포착된 오류는 console.error를 통해 기록됩니다. onUncaughtError 및 onCaughtError와 같은 새로운 메소드를 사용하면 사용자 정의가 가능합니다.</p></li> <li> <p><strong>제거된 API</strong></p> <ul> <li> <strong>ReactDOM.render 및 ReactDOM.hydrate</strong>: ReactDOM.createRoot 및 ReactDOM.hydrateRoot로 대체되었습니다.</li> <li> <strong>함수용 defaultProps</strong>: 대신 ES6 기본 매개변수를 사용하세요.</li> <li> <strong>레거시 컨텍스트</strong>: 최신 contextType API를 사용하세요.</li> <li> <strong>react-dom/test-utils</strong>: React Core의 act로 대체되었습니다.</li> </ul> </li> <li><p><strong>제거된 UMD 빌드</strong><br> UMD 빌드는 더 이상 지원되지 않습니다. esm.sh와 같은 스크립트 태그 사용에는 ESM 기반 CDN을 사용하세요.</p></li> </ol> <hr> <h2> <strong>업그레이드 준비</strong> </h2> <h3> 1. <strong>먼저 React 18.3으로 업그레이드</strong> </h3> <p>React 18.3에는 React 19에서 제거된 API에 대한 지원 중단 경고가 도입되었습니다. 이 중간 단계는 전체 업그레이드 전에 잠재적인 문제를 식별하는 데 도움이 됩니다.</p> <h3> 2. <strong>Codemod 및 마이그레이션 도구</strong> </h3> <p>더 이상 사용되지 않는 API를 리팩토링하고 TypeScript 유형을 조정하는 등 반복적인 업데이트를 자동화하려면 React codemod를 사용하세요.</p> <h3> 3. <strong>타입스크립트 조정</strong> </h3> <p>React 19에는 더 엄격한 TypeScript 입력이 포함되어 있습니다. 예:</p> <ul> <li> ReactChild → React.ReactElement | 번호 | 끈 </li> <li> VoidFunctionComponent → FunctionComponent </li> </ul> <p>이러한 업데이트에 맞춰 코드를 리팩터링하세요.</p> <hr> <h2> <strong>원활한 전환을 위한 팁</strong> </h2> <ul> <li> <strong>엄격 모드 활용</strong>: React 19에서는 모범 사례를 더욱 엄격하게 시행합니다. 엄격 모드에서 앱을 실행하면 숨겨진 버그가 드러날 수 있습니다.</li> <li> <strong>조기 및 자주 테스트</strong>: 획기적인 변경 사항을 고려할 때 철저한 테스트가 중요합니다. React-test-renderer에서 React Testing Library로 전환하면 동시 렌더링과의 호환성이 보장됩니다.</li> <li> <strong>서버 렌더링 검토</strong>: 앱이 SSR을 사용하는 경우 React 19의 새로운 사전 렌더링 API에 대해 테스트하고 서버 구성 요소의 원활한 통합을 확인하세요.</li> </ul> <hr> <h2> <strong>React 19가 중요한 이유</strong> </h2> <p>React 19는 현대 애플리케이션을 위한 강력한 기능을 지원하는 동시에 개발자 경험을 개선하는 중요한 도약입니다. 비동기 작업, 개선된 Suspense 또는 서버 측 렌더링 향상에 관심이 있으신가요? 이번 릴리스에는 개발자가 더욱 빠르고 탄력적인 앱을 구축하는 데 도움이 되는 기능이 포함되어 있습니다.</p> <p>들어갈 준비가 되셨나요? React 19 업그레이드 가이드부터 시작하여 전체 릴리스 노트를 살펴보세요.</p> <p>즐거운 코딩하세요! ?</p>

위 내용은 React 기능, 지원 중단 및 주요 변경 사항 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript로 문자열 문자를 교체하십시오Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

8 멋진 jQuery 페이지 레이아웃 플러그인Mar 06, 2025 am 12:48 AM

손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.

자신의 Ajax 웹 응용 프로그램을 구축하십시오Mar 09, 2025 am 12:11 AM

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

10 JQuery Fun 및 Games 플러그인Mar 08, 2025 am 12:42 AM

10 재미있는 jQuery 게임 플러그인 웹 사이트를보다 매력적으로 만들고 사용자 끈적함을 향상시킵니다! Flash는 여전히 캐주얼 웹 게임을 개발하기위한 최고의 소프트웨어이지만 JQuery는 놀라운 효과를 만들 수 있으며 Pure Action Flash 게임과 비교할 수는 없지만 경우에 따라 브라우저에서 예기치 않은 재미를 가질 수 있습니다. jQuery tic 발가락 게임 게임 프로그래밍의 "Hello World"에는 이제 jQuery 버전이 있습니다. 소스 코드 jQuery Crazy Word Composition 게임 이것은 반은 반은 게임이며, 단어의 맥락을 알지 못해 이상한 결과를 얻을 수 있습니다. 소스 코드 jQuery 광산 청소 게임

내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

Ajax를 사용하여 상자 컨텐츠를 동적으로로드합니다Mar 06, 2025 am 01:07 AM

이 튜토리얼은 Ajax를 통해로드 된 동적 페이지 상자를 작성하여 전체 페이지 재 장전없이 인스턴트 새로 고침을 가능하게합니다. jQuery 및 JavaScript를 활용합니다. 맞춤형 Facebook 스타일 컨텐츠 박스 로더로 생각하십시오. 주요 개념 : Ajax와 JQuery