풍부한 새로운 기능, 개선 사항, 획기적인 변화를 제공하는 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는 리소스 검색 및 로드 시간을 향상시킵니다.</p>
<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>
<p>위 내용은 React 기능, 지원 중단 및 주요 변경 사항 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">typescript</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">es6</a> <a href="javascript:void(0);">String</a> <a href="javascript:void(0);">Resource</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">while</a> <a href="javascript:void(0);">include</a> <a href="javascript:void(0);">Error</a> <a href="javascript:void(0);">JS</a> <a href="javascript:void(0);">console</a> <a href="javascript:void(0);">number</a> <a href="javascript:void(0);">function</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">transform</a> <a href="javascript:void(0);">transition</a> <a href="javascript:void(0);">ui</a> <a href="javascript:void(0);">Access</a><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="JavaScript 요소 제거가 왜 그렇게 복잡한가요? 그리고 어떻게 단순화할 수 있나요?" href="https://m.php.cn/ko/faq/1796715905.html">JavaScript 요소 제거가 왜 그렇게 복잡한가요? 그리고 어떻게 단순화할 수 있나요?</a></span><span>다음 기사：<a class="dBlack" title="JavaScript 요소 제거가 왜 그렇게 복잡한가요? 그리고 어떻게 단순화할 수 있나요?" href="https://m.php.cn/ko/faq/1796715919.html">JavaScript 요소 제거가 왜 그렇게 복잡한가요? 그리고 어떻게 단순화할 수 있나요?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
