개발/문서번역

[문서번역] React v17.0 Release

안아주 2022. 1. 6. 01:57

개요

2020-10-20 Dan Abramov와 Rachel Nabors에 의해 작성되었습니다.

원문

 

React v17.0 – React Blog

Today, we are releasing React 17! We’ve written at length about the role of the React 17 release and the changes it contains in the React 17 RC blog post. This post is a brief summary of it, so if you’ve already read the RC post, you can skip this one.

ko.reactjs.org

우리는 React 17을 출시했습니다! 우린 리엑트 17의 역할과 React 17 RC blog post에 포함된 변화에 대해 상세히 썼습니다. 이번 글은 해당 내용에 대한 간략한 요약본입니다, 그래서 위의 글을 미리 읽었다면 이번 글을 스킵할 수 있습니다.

새로운 기능은 없습니다

React 17 출시는 특이합니다, 이유는 개발자가 직면하는 새로운 기능을 추가하지 않았기 때문입니다.

대신에, 이번 버전은 리엑트 자체를 업그레이드 하는데 중점을 둡니다.

 

특히 React 17은 "디딤돌" 릴리즈는 한 버전의 리엑트가 관리하는 트리를 다른 버전의 리액트가 관리하는 트리 안에 안전하게 내장할 수 있는 버전입니다.

또한 다른 기술로 구축된 앱에 리액트를 쉽게 내장할 수 있습니다.

점진적 업그레이드

React 17은 점진적인 React 업그레이드가 가능합니다. React 15에서 16으로 업그레이드 할 때, 당신은 보통 앱 전체 업그레이드를 한번에 합니다. 이 작업은 많은 앱에서 잘 작동합니다. 하지만 이 사항은 점점 더 어려워 질 수 있습니다 만약 코드베이스가 몇년 전에 작성되었고 활발하게 유지되었다면 말이죠. 그리고 페이지에서 두 가지 버전의 React를 사용할 수 있습니다, 그러나 React 17까지는 취약하고 이벤트에 문제를 일으켰습니다.

 

우리는 React 17의 이와 같은 많은 문제를 해결하고 있습니다. 이 의미는 React 18 차기 버전이 나오면 당신은 다양한 옵션을 갖게 됩니다. 첫째 옵션은 당신이 이전에 했을지 몰라도 앱을 한번에 업그레이드 할 것입니다. 하지만 당신은 앱을 하나씩 조각 단위로 업그레이드 할 수 있는 옵션이 있습니다. 예를들어, 당신이 당신의 앱을 React 18로 결정을 할 수 있습니다만 일부 lazy-loaded된 대화상자나 하위경로는 React 17로 유지합니다.

 

점진적 업그래이드를 하라는 의미는 아닙니다. 유명 앱들에서 여전히 한번에 업그레이드 하는게 최고의 방법입니다. 두개의 React버전을 로드하는 것은 그 중 하나가 요청 시 느리게 로드되는 겨웅에서 여전히 이상적이지 않습니다. 그러나, 적극적으로 유지보수되지 않는 대규모 앱들의 경우, 해당 옵션은 고려해볼만 하고, React 17은 해당 앱들이 뒤쳐지지 않게 합니다.

 

우리는 필요한 경우 React의 이전 버전에서 lazy-load 하는 방법을 예시 리포지토리에 준비했습니다. 해당 대모는 Create-React-App에서 사용되지만, 다른 툴과 유사한 접근 방식을 따를 수 있어야 합니다. 다른 툴을 pull request로 사용 하는 데모를 환영하비다.

더보기

Note

다른 변경 사항들은 React 17이후로 연기했습니다. 이번 릴리즈의 목표는 점진적 업그레이드를 할 수 있는 것입니다. 만약에 React 17로 업그레이드 하는게 어렵다면, 해당 목적에 어긋날 것 입니다.

이벤트 위임 변경사항

점진적 업데이트를 사용하려면, 우리는 React 이벤트 시스템에 변경이 필요했습니다. React 17의 주요한 릴리즈 입니다, 왜냐하면 이 변경점들은 잠재적으로 깨지기 때문입니다. 당신은 우리의 버저닝 FAQ에서 확인하고 안정성에 대한 우리의 코멘트에서 자세히 알아보세요.

 

React 17에서, React는 더이상 document level 밑에 이벤트 헨들러를 붙히지 않습니다. 대신에, React Tree가 렌더링 되는 최상위 DOM 콘테이너안에 부착됩니다.

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);

React 16과 이전 버전에서, React는 대부분의 이벤트 document.addEventListener()를 실행합니다. React 17은 내부 밑에 rootNode.addEventListener()를 대신 호출합니다.

우리는 React와 React가 아닌 코드들의 통합과 관련된 다양한 문제들이 새로운 동작에 의해 수정되었음을 확인하였습니다.

 

만약 해당 변화에 문제가 생긴다면 여기를 통해 해결할 수 있는 일반적인 방법이 있습니다.

기타 구분 변경 사항

React 17 RC 블로그 게시글에 React 17에 나머지 변화들을 설명합니다.

 

우리는 Facebook Product 코드의 10만개 이상의 구성요소 중 20개 미만의 구성요소를 변경하면 해당 변경사항을 적용할 수 있습니다, 그래서 우리는 대부분의 유명 앱들이 React17로 큰 문제 없이 업그레이드 할 수 있을 것으로 기대합니다. 문제가 생긴다면 여기로 말씀주세요.

 

새로운 JSX 변환

React 17은 새로운 JSX변환을 지원합니다. 우리는 또한 React 16.14.0, React 15.7.0, 0.14.10에 백포트를 지원합니다. 이 부분은 완전히 Opt-In되었고, 사용할 필요가 없습니다. 기존의 JSX 변환은 계속 작동하고, 해당 기능에 대한 지원을 멈출 계획은 없습니다.

React Native

React Native는 별도의 릴리즈 일정을 가지고 있습니다. 우리는 React Native 0.64에서 React 17에 지원을 받았습니다. 언제나 그랬듯이, 이슈 트래커에서 릴리즈 논의들을 추적할 수 있습니다.

설치

npm에서 React 17 설치하기

npm install react@17.0.0 react-dom@17.0.0

yarn에서 React 17 설치하기

yarn add react@17.0.0 react-dom@17.0.0

CDN을 통해 UMD 리엑트 빌드 제공

<script crossorigin src="https://unpkg.com/react@17.0.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.production.min.js"></script>

자세한 설치 지침 문서를 참조해주세요

번역 후기

공식 문서를 번역하면서, 모르는 용어와 단어가 많아서 많이 서투릅니다.

변경 로그에 대한 내용도 있고 실제 변경 사항은 링크를 타고 들어가야만 알 수 있는 사항들이 있기에 실제 변경에 대한 자세한 사항은 추가 공식문서를 참조해주세요.