React v17.0 release

 2020년 10월 20일 React 17버전이 릴리즈됐다. 해당 버전은 새로운 기능보다는 React를 더 쉽게 <업그레이드>할 수 있도록 하는 데 중점을 두고 출시되었다.

 

 점진적 업그레이드 

 React 17버전은 점진적인 React App 업그레이드를 가능하게 한다. 보통은 예를 들어 React15버전을 16버전으로 업그레이드할 때에 React 전체 앱을 한번에 업그레이드시키는 방법을 취한다. 현재도 이 방법이 가장 이상적인 방법이라 생각하며 이것을 추천한다.

 반면 유지보수가 더딘 경우, 즉 한 번에 1버전 그 이상으로 업그레이드를 하는 경우에는 앱의 일부는 17 하위 버전으로 유지하는 것이 더 효율적일 수도 있다. 문제는 이 방법을 사용하게 되면 로딩 속도가 느리거나 이벤트에 문제가 야기될 수 있다.  React 17버전은 하위 버전인 경우라도 해당 어플이 뒤쳐지지않도록 개선했다.

 

 

본격적으로 어떤 부분들이 변경되었는지 알아보자.

 

 

 

 이벤트 위임 방식 변경 

 17 이전버전에서 React는 이벤트가 발생할 경우 실제 이벤트를 선언하는 DOM 노드가 아닌, document 노드에 이벤트를 위임했다. [ 이벤트가 발생하면=> 호출할 구성 요소를 파악하고 => 구성 요소를 통해 위로 버블링 ] 하는 것이 원칙이나, 이면에서는 이미 document가 이벤트 핸들러를 설치하는 수준까지 버블링됐다. 이는 대형 어플리케이션 트리의 성능을 높여주고, 이벤트 재생과 같은 새로운 기능을 더 쉽게 추가할 수 있다는 장점이 있었다.

React16 이벤트 핸들링

 

 

 그러나 이러한 이벤트 핸들링 방식은 서로 다른 버전의 React를 중첩하는 데 문제를 낳았다. 페이지에 여러 버전의 React들이 있다고 하자. 어떤 버전의 React가, 즉 중첩된 트리가 이벤트 전파를 중지한다. 그러나 그 외의 다른 중첩된 트리들은 여전히 받는다.(?)

 

 이러한 문제를 극복하기 위해서 React17에서는 더 이상 document 레벨에서 이벤트 핸들러를 연결하지 않기로 했다. 대신해서 root DOM 컨테이너, React 트리가 렌더링되는 곳에 연결하기로 했다.

 

React17 이벤트핸들링

 

 함수적으로 말하면, React16 이전 버전에서는 document.addEventListener( )가 대부분의 이벤트를 처리했고, React17부터는 rootNode.addEventListener( )를 호출해서 이벤트 처리를 하게 된다.

 

 결론적으로 다른 버전의 React 중첩으로 인해 발생하는 이벤트 전파 문제를 보완하고 React 앱에 다른 버전의 React 앱을 포함하는 체제에 안전성을 부여한다.

 

 

 

 

 그 밖에 주요 변경 사항 

 

가. 브라우저에 맞추기

-onScroll 이벤트는 더 이상 일반적인 혼란을 막기 위해 이벤트 버블링을 하지 않음.

 

-onFocus, onBlur 이벤트 => focusin, focusout

   (더 이상 onFocus, onBlur를 사용하지 않고 후자를 사용함)

 

-캡처 단계 이벤트(ex. onClickCapture)는 이제 실제 브라우저 캡처 3단계 리스너를 사용함.

 

 

나. 이벤트 풀링 하지 않음.

<이벤트 풀링> 최적화 과정을 제거한다. 과거에는 이벤트 풀링을 하기 위해서 e.persist( ) 를 호출했다. 그러나 이제는 e.persist( )를 호출하지 않고도, 이벤트 필드를 읽을 수 있다. 따라서 e.persist( )는 이제 아무것도 수행하지 않는다.

 

다. 효과 정리 타이밍 ( Effect Cleanup Timing )

useEffect 정리 기능의 타이밍을 더 일관되게 만들고 있다.

 

라. undefined는 일관적으로 오류다. ( Consistent Errors for Returning Undefined )

마. Native 컴포넌트 스택 ( Native Component Stacks )

바. 개인 내보내기 제거( Removing Private Exports )

 

 

 

 설치 

 

Release Candidate는 안정적인 Release보다 버그를 포함할 가능성이 더 높기 때문에 아직 프로덕션에 배포하지 마세요.

 

Npm

npm install react@17.0.0-rc.3 react-dom@17.0.0-rc.3

 

Yarn

yarn add react@17.0.0-rc.3 react-dom@17.0.0-rc.3

 

CDN

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

 

 

 

참고 사이트

ko.reactjs.org/blog/2020/08/10/react-v17-rc.html

React v17.0 Release Candidate: No New Features – React Blog