React JavaScript UI 라이브러리의 새로운 기능

이제 프로덕션 릴리스에서 사용할 수있는 React JavaScript UI 라이브러리 버전 16.8에는 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수있는 후크 기능이 있습니다.

React 다운로드 위치

GitHub에서 React producton 버전을 다운로드 할 수 있습니다.

현재 버전 : React 16.8의 새로운 기능

2019 년 2 월에 출시 된 React 168은 React의 DOM, DOM 서버, 테스트 렌더러 및 얕은 렌더러에 대한 후크 구현을 제공합니다. 후크는 React DevTools에서 지원됩니다. 개발자는 자체 후크를 구축하여 구성 요소간에 재사용 가능한 상태 저장 논리를 공유 할 수 있습니다. 하지만 페이스 북은 개발자들에게 "밤새"후크를 사용하도록 응용 프로그램을 다시 작성하도록 권장하지 않고이 기능에 시간을 할애 할 것을 권고합니다.

React에서 클래스를 제거 할 계획이 없으므로 개발자는 몇 가지 새로운 구성 요소에서 후크를 시도해야합니다. 에버 리징 후크를 사용하는 코드는 클래스를 사용하는 기존 코드와 함께 작동합니다.

이전 버전 : React 16.7의 새로운 기능

2018 년 12 월에 출시 된 React 16.7은 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수있는 후크 기능을 추가합니다.

후크는 함수 구성 요소에서 React 상태 및 수명주기 기능에 연결하는 함수입니다. 현재 기존 코드와 나란히 작업하여 점진적으로 채택 할 수 있습니다. 실제로 React에서 클래스를 제거 할 계획은 없습니다. 후크는 다음과 같은 React의 다양한 문제를 해결합니다.

  • 재사용 가능한 동작을 구성 요소에 연결하는 방법이 없습니다. 이를 해결하려는 렌더 소품 및 고차 구성 요소와 같은 패턴이 있었지만 이러한 패턴은 구성 요소를 재구성해야하므로 번거롭고 코드를 따르기가 더 어려워 질 수 있습니다. 개발자는 후크를 사용하여 독립적 인 테스트 및 재사용을 위해 구성 요소에서 상태 저장 논리를 추출 할 수 있습니다.
  • 복잡한 구성 요소는 이해하기가 너무 어려워졌습니다. 후크를 사용하면 구성 요소를 구독 설정 또는 데이터 가져 오기와 같은 관련 부분을 기반으로 더 작은 기능으로 분할 할 수 있습니다. 이것은 수명주기 방법에 따라 분할을 강제하는 대신 수행됩니다.
  • 클래스는 사람과 기계를 혼동 할 수 있으며 React를 배우는 데 가장 큰 장벽으로 간주됩니다. 후크를 사용하면 개발자가 클래스없이 React의 기능을 더 많이 사용할 수 있습니다. 후크는 기능을 수용하지만 React의 정신을 희생하지 않습니다. 명령형 탈출 해치에 대한 액세스가 제공됩니다. 개발자는 복잡한 기능적 또는 반응 형 프로그래밍 기술을 배울 필요가 없습니다.

이전 버전 : React 16.6의 새로운 기능

2018 년 10 월에 출시 된 React 16.6은 몇 가지 향상된 기능을 제공합니다.

  • 로는 memo개발자가 입력 소품 동일 사용할 때 클래스 컴포넌트 렌더링에서 구제 할 수있는 방법과 유사한 기능 컴포넌트, 렌더링에서 구제 할 수 PureComponents또는 shouldComponentUpdate.
  • 을 사용 lazy하면 개발자가 Suspense.NET Framework를 호출 할 때 동적 가져 오기를 래핑하여 코드 분할을 위해 구성 요소를 사용할 수 있습니다 React.lazy(). 참고 :이 기능은 아직 서버 측 렌더링에 사용할 수 없습니다.
  • 클래스 구성 요소 내에서 컨텍스트 값을 사용하기 위해 편의 API가 도입되었습니다. 개발자들은 React 16.3에서 새로운 render prop API를 채택하는 것이 클래스 컴포넌트에서 어려울 수 있다고 불평했습니다.
  • 오류 메서드 getDerivedStatefromError()는 렌더링이 완료되기 전에 대체 UI를 렌더링합니다. 참고 : 아직 서버 측 렌더링에 사용할 수 없지만 개발자는 준비를 시작할 수 있습니다.
  • 두 개의 StrictmodeAPI가 더 이상 사용되지 않습니다. findDOMNode()contextType 및 getChildContext. 개발자는 새 contextTypeAPI 로 업그레이드하는 것이 좋습니다 .

이전 버전 : React 16.4의 새로운 기능

2018 년 5 월 말에 출시 된 React 버전 16.4는 포인터 이벤트, 자주 요청되는 기능에 대한 지원은 물론 다가오는 비동기 렌더링 기능에 대한 개선 사항을 추가합니다. 포인터 이벤트를 지원하는 브라우저에는 Google Chrome, Mozilla Firefox, Microsoft Edge 및 Microsoft Internet Explorer 버전이 포함됩니다.

포인터 이벤트는 마우스 또는 터치와 같은 장치를 처리하는 단일 이벤트 모델을 제공하도록 설계된 포인팅 장치에 대해 발생하는 DOM 이벤트입니다.

포인터 이벤트 지원을 통해 React는 다음을 포함하는 이벤트 유형에 대한 지원을 추가합니다.

  • onPointerDow
  • onPointerMove
  • onPointerUp
  • onPointerCancel
  • onGotPointerCapture
  • onLostPointerCapture
  • onPointerEnter
  • onPointerLeave
  • onPointerOver
  • onPointerOut

React 16.4의 다른 새로운 기능은 다음과 같습니다.

  • 계획된 비동기 렌더링 모드와의 호환성이 향상되었습니다. 이를 위해 릴리스에는 getDerivedStatefromProps업데이트가 발생하는 이유에 관계없이 구성 요소가 필요할 때마다 호출되는에 대한 버그 수정 기능 이 있습니다. 구성 요소가 부모에 의해 다시 렌더링되고 로컬 setState. 이 수정 사항은 대부분의 앱에 영향을주지 않지만 드물지만 적은 수의 구성 요소에 문제가 발생할 수 있습니다.
  • unstable_Profiler성능 측정을 위해 라는 실험적 프로파일 러 구성 요소가 추가되었습니다 .
  • 사용자 지정 렌더러를 만들기위한 실험 조정자는 평면이고 중첩 된 개체를 사용하지 않는 새로운 호스트 구성 모양을 제공합니다.
  • React DOM에 대한 수정에는 경우에 따라 컨텍스트 전파를 방해하는 버그 수정과 일부 속성이 사용자 정의 요소 노드에서 잘못 제거되는 상황이 포함됩니다.

실험적인 호출 반환 기능은 번들 크기에 영향을 미치고 API가 충분하지 않아 React 버전 16.4에서 삭제되었습니다. 페이스 북은 언젠가는 다른 형태로 돌아올 것으로 기대한다.

이전 버전 : React 16.3의 새로운 기능

React의 2018 년 3 월 버전 16.3 릴리스는 컨텍스트에 대한 API뿐만 아니라 라이프 사이클 변경 사항을 제공합니다.

React 16.3의 수명주기 변경

구성 요소 수명주기의 경우 다가오는 비동기 렌더링 모드는 원래 의도하지 않은 방식으로 사용되는 클래스 구성 요소 API 모델을 확장합니다. 따라서 getDerivedStateFromProps기존 라이프 사이클에 대한보다 안전한 대안으로를 포함하여 새로운 라이프 사이클이 추가되고 componentWillReceiveProps있습니다. 또한 getSnapshotBeforeUpdate업데이트 전에 DOM과 같은 속성의 안전한 읽기를 지원하기 위해 추가되었습니다 .

React 16.3은 to componentWillMountcomponentWillReceiveUpdate. 와 같은 이러한 라이프 사이클 중 일부에 "안전하지 않은"접두사를 추가합니다 . 이러한 경우 "안전하지 않음"은 보안을 의미하는 것이 아니라 이러한 라이프 사이클을 사용하는 코드가 향후 React 버전에서 버그를 가질 가능성이 더 높다는 사실을 의미합니다.

React 16.3 릴리스에서 개발자는 레거시 메서드에 대해 아무것도 할 필요가 없습니다. 이 릴리스는 오픈 소스 프로젝트 유지 관리자가 지원 중단 경고에 앞서 라이브러리를 업데이트하도록 유도하기위한 것으로, 16.x 라인의 향후 릴리스까지 활성화되지 않습니다.

버전 16.3에는 StrictMode안전하지 않은 수명주기가 있는 구성 요소를 식별 하는 구성 요소가 추가되었습니다 . StrictMode는 개발 모드에서만 실행되며 레거시 문자열 참조 API 사용에 대해 경고하고 예기치 않은 부작용을 감지합니다. 하위 항목에 대한 추가 검사를 활성화합니다. 나중에 더 많은 기능이 추가 될 예정입니다.

컨텍스트 API는 정적 유형 검사 및 심층 업데이트를 지원합니다.

새로운 컨텍스트 API는 정적 유형 검사 및 심층 업데이트를 지원합니다. 이 API는 또한 이전의 실험적 API 버전보다 더 효율적이라고 Facebook의 React JS 코어 팀의 일원 인 Brian Vaughn이 말했습니다. 컨텍스트를 사용하면 소품을 수동으로 전달할 필요없이 구성 요소 트리를 통해 데이터를 전달할 수 있습니다.이 중 일부에는 로케일 기본 설정 및 UI 테마가 포함됩니다. 이전 API는 React 16.x 릴리스에서 계속 작동하여 사용자에게 마이그레이션 할 시간을 제공합니다.

React 16.3의 새로운 기능 :

  • 참조 createrefAPI를 관리하기위한 개선 된 API로, render 메소드에서 개발 된 DOM 노드 또는 React 요소에 액세스하는 방법을 제공합니다.
  • forwardRef코드 재사용을 촉진하는 상위 구성 요소를 사용하는 데 도움 이되는 API.

이전 버전 : React 16.2의 새로운 기능

React 16.2의 2017 년 11 월 릴리스는 구성 요소 렌더링 메서드에서 여러 하위 항목을 표시하기위한 지원을 개선하는 조각 기능을 제공합니다. 빈 JSX 태그와 유사한 프래그먼트를 사용하면 개발자가 DOM에 노드를 추가하지 않고도 자식 목록을 그룹화 할 수 있습니다.

NPM 레지스트리에서 버전 16.2를 설치할 수 있습니다. Yarn 패키지 관리자로 설치하려면 yarn add [email protected]^16.2.0 [email protected]^16.2.0. NPM과 함께 설치하려면 npm install --save [email protected]^16.2.0 [email protected]^16.2.0.

이전 버전 : React 16.0의 새로운 기능

개발 과정에서 "React Fiber"라고 불리는 2017 년 9 월의 React 16.0은 React 코어를 재 작성하여 새로운 조정 알고리즘을 통해 복잡한 애플리케이션에 대한인지 된 응답 성을 향상시킵니다. React 16의 주요 기능은 다음과 같습니다.

  • 디버그하기 쉽도록 구성 요소 스택 추적 기능이있는 오류입니다.
  • 컴포넌트 렌더 메소드에서 직접 문자열 / 배열 반환.
  • 더 빠른 새로운 스트리밍 서버 측 렌더러.
  • 보다 네이티브와 유사한 애플리케이션 성능.
  • 논란의 여지가있는 BSD + Patents 라이선스에서보다 만족스러운 MIT 라이선스로의 전환.

React의 내부는 React 16에서 완전히 재 작성되었지만 공개 API는 "본질적으로 변경되지 않았습니다"라고 React의 Facebook 엔지니어링 관리자 인 Sophie Alpert가 말했습니다. 의도는 개발자가 React로 빌드 된 기존 구성 요소를 다시 작성하지 않아도되도록하는 것이 었습니다.

React 16의 새 코드는 Facebook의 익숙한 관행에 따라 GitHub 저장소의 이전 코드와 함께 작성되었습니다. 둘 사이의 전환은 부울 useFiber기능 플래그 로 수행되었습니다 . 이 프로세스를 통해 Facebook은 기존 사용자에게 영향을주지 않고 새로운 구현을 구축하기 시작하고 이전 코드 기반에 대한 버그 수정을 계속할 수 있습니다.

몇 달 동안 버그를 해결 한 후 Facebook은 두 가지 버전의 React를 최신 상태로 유지하기보다는 가능한 버그 세트를 줄이기 위해 단일 제품을 제공하기로 결정했습니다.