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으로 문의하세요.

관련 기사

Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

JavaScript 프레임 워크 : 현대적인 웹 개발 파워May 02, 2025 am 12:04 AM

JavaScript 프레임 워크의 힘은 개발 단순화, 사용자 경험 및 응용 프로그램 성능을 향상시키는 데 있습니다. 프레임 워크를 선택할 때 : 1. 프로젝트 규모와 복잡성, 2. 팀 경험, 3. 생태계 및 커뮤니티 지원.

JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

Node.js는 TypeScript가있는 스트림입니다Apr 30, 2025 am 08:22 AM

Node.js는 크림 덕분에 효율적인 I/O에서 탁월합니다. 스트림은 메모리 오버로드를 피하고 큰 파일, 네트워크 작업 및 실시간 애플리케이션을위한 메모리 과부하를 피하기 위해 데이터를 점차적으로 처리합니다. 스트림을 TypeScript의 유형 안전과 결합하면 Powe가 생성됩니다

Python vs. JavaScript : 성능 및 효율성 고려 사항Apr 30, 2025 am 12:08 AM

파이썬과 자바 스크립트 간의 성능과 효율성의 차이는 주로 다음과 같이 반영됩니다. 1) 해석 된 언어로서, 파이썬은 느리게 실행되지만 개발 효율이 높고 빠른 프로토 타입 개발에 적합합니다. 2) JavaScript는 브라우저의 단일 스레드로 제한되지만 멀티 스레딩 및 비동기 I/O는 Node.js의 성능을 향상시키는 데 사용될 수 있으며 실제 프로젝트에서는 이점이 있습니다.

JavaScript의 기원 : 구현 언어 탐색Apr 29, 2025 am 12:51 AM

JavaScript는 1995 년에 시작하여 Brandon Ike에 의해 만들어졌으며 언어를 C로 실현했습니다. 1.C Language는 JavaScript의 고성능 및 시스템 수준 프로그래밍 기능을 제공합니다. 2. JavaScript의 메모리 관리 및 성능 최적화는 C 언어에 의존합니다. 3. C 언어의 크로스 플랫폼 기능은 자바 스크립트가 다른 운영 체제에서 효율적으로 실행하는 데 도움이됩니다.

무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?Apr 28, 2025 am 12:01 AM

JavaScript는 브라우저 및 Node.js 환경에서 실행되며 JavaScript 엔진을 사용하여 코드를 구문 분석하고 실행합니다. 1) 구문 분석 단계에서 초록 구문 트리 (AST)를 생성합니다. 2) 컴파일 단계에서 AST를 바이트 코드 또는 기계 코드로 변환합니다. 3) 실행 단계에서 컴파일 된 코드를 실행하십시오.

파이썬과 자바 스크립트의 미래 : 트렌드와 예측Apr 27, 2025 am 12:21 AM

Python 및 JavaScript의 미래 추세에는 다음이 포함됩니다. 1. Python은 과학 컴퓨팅 분야에서의 위치를 통합하고 AI, 2. JavaScript는 웹 기술의 개발을 촉진하고, 3. 교차 플랫폼 개발이 핫한 주제가되고 4. 성능 최적화가 중점을 둘 것입니다. 둘 다 해당 분야에서 응용 프로그램 시나리오를 계속 확장하고 성능이 더 많은 혁신을 일으킬 것입니다.

See all articles