React 17: 왜 그렇게 중요한가요?

React 17이 나오고 React 16이 출시된 지 2.5년이 지났습니다. React 16.x에는 Hooks, Context 등과 같은 많은 새로운 변경 사항이 포함되어 있습니다. 그러나 새로운 React 17에는 새로운 기능이 없지만 올바른 조치입니다. 이번에는 그 전에 발생한 몇 가지 사소한 변경 사항을 살펴보겠습니다.

이벤트 위임에 대한 변경 사항:
React는 더 이상 문서 수준에서 이벤트 핸들러를 연결하지 않습니다. 대신 React 트리가 렌더링되는 루트 DOM 컨테이너에 연결합니다

.

Why this is important ?

다른 JS 프레임워크와 함께 React를 더 쉽게 사용할 수 있습니다.

다른 React 버전에서 관리하는 트리 내에서 한 버전에서 관리하는 React 트리를 사용하는 것이 더 안전합니다.

반응 가져오기 없음:
Create React App 보일러 플레이트(cra) 또는 npm을 사용하여 반응을 다운로드하고 모든 jsx 또는 js 코드에서 React를 가져오는 경우 이제 더 이상 필요하지 않습니다.

import React from "react";

onScroll 버블링 이벤트: React 이전 버전에는 잘 알려지지 않은 버그가 있었습니다. 부모 요소가 자식의 스크롤 이벤트를 캡처하는 데 사용되어 스크롤 이벤트 리스너를 사용할 때 문제가 발생했습니다. 이제 이 문제가 수정되었습니다

.

이벤트 풀링 없음: 이벤트 풀링이 무엇인지 모르는 분들을 위해: 반응 앱에 있는 이벤트 핸들러는 실제로 SyntheticEvent(네이티브 브라우저 이벤트에 대한 래퍼)의 인스턴스를 전달하여 전체에서 일관된 속성을 갖도록 합니다. 다른 브라우저).
이벤트가 트리거될 때마다 풀에서 인스턴스를 가져와 속성을 채우고 재사용합니다. 이벤트 핸들러 실행이 완료되면 모든 속성이 무효화되고 합성 이벤트 인스턴스가 다시 풀로 해제됩니다.
이것은 실제로 성능을 향상시키기 위해 빌드했지만 최신 브라우저에서 성능을 향상시키지 못했고 개발자를 혼란스럽게 하여 제거하기로 결정했습니다.

Effect Cleanup Timing: React 16의 useEffect 후크는 비동기식으로 실행되지만 동기식으로 실행하는 데 사용되는 정리와 같이 우리가 사용한 정리는 문제를 일으켰습니다. 예: Api 또는 애니메이션을 호출한 경우 작업이 완료되기 전에 다음과 같은 경우 구성 요소가 마운트 해제됩니다.
이제 구성 요소가 마운트 해제된 경우에도 비동기식으로 실행되므로 더 이상 문제가 되지 않으며 정리가 수행되어 성능이 향상됩니다.

useEffect(() => {
    event.subscribe()
    return function cleanup() {
        event.unsubscribe()
    }
})

이것이 기능이 아닌지 혼란스러울 수 있습니다. 이것은 내부적으로 더 많은 변경 사항이 있고 알아두면 좋은 버그 수정이지만 이번 릴리스는 올바른 움직임입니다. 지금이 이전 반응 프로젝트를 클래스에서 후크 기반 함수로 마이그레이션할 적기입니다. 컨텍스트를 구현하면 비즈니스와 개발자 모두 반응이 움직이는 빠른 속도를 따라잡을 수 있는 충분한 시간을 얻을 수 있습니다.
새로운 기능을 찾으면 댓글에 적어주세요.

저는 풀 스택 JS 개발자입니다. 이것은 Dev의 첫 번째 기사입니다. 이 기사에 대한 제안이나 건설적인 피드백을 환영합니다.