React 18의 모든 새로운 기능

React 팀은 React 18에서 React에 추가 될 새로운 기능을 공개했으며이 블로그에서 이러한 기능을 살펴보고 가까운 장래에 어떻게 도움이 될 수 있는지 살펴볼 것입니다!

엄격 모드 🧑🏽‍🏫

엄격 모드 에는 "엄격한 효과" 라는 새로운 동작과 같은 몇 가지 추가 기능 이 있습니다. 이것은 우리가 두 번 호출 같은 효과 수 mount와 unmount. 보다 탄력적 인 구성 요소를 찾을뿐만 아니라 개발 중에 빠른 새로 고침으로 동작을 수정할 수있는 환경을 만듭니다. 현재 구축중인 '오프 스크린 API'도 있습니다.

오프 스크린 API는 구성 요소를 마운트 해제하는 대신 숨기고 상태를 유지하면서 mount/ unmount효과를 계속 호출하여 더 나은 성능을 제공 합니다.

자동 배치 ⚙️

이제 자동 일괄 처리에 대한 주요 개선 사항이 있습니다. 먼저 성능을 살펴 보겠습니다.

React는 이미 일괄 처리, 즉 그룹화 된 여러 상태 업데이트를 하나로 통합하여 불필요한 재 렌더링을 최소화합니다. 그러나 Promise, timeouts 또는 기타 핸들러와 같은 요소는 DOM 이벤트 핸들러로만 제한 되었기 때문에이를 활용하지 못했습니다.

이 모든 것은 React 18로 변경되어 안전하게 할 수있는 한 제한없이 상태 업데이트를 일괄 처리합니다. 그 결과, 당신은 묻습니다.… 이것은 추가적인 개입없이 더 나은 성과를 만들 것입니다.

동시 렌더링 🔁

동시 렌더링은 React 18의 가장 큰 업데이트이므로 확실히 찾아야 할 것입니다.

이 이름 이전에는 '동시 모드'라고했습니다. 이름의 변경은 동시 기능을 점진적으로 채택 할 수 있음을 의미합니다. 이를 통해 코드를 다시 작성하지 않고도 동시 기능을 채택하고 자신의 속도에 맞게 수행 할 수 있습니다.

새로운 API 🆕

React 18에서는 다양한 형태로 제공되는 몇 가지 새로운 API를 얻습니다.

startTransition— 그 목적은 상태 업데이트를 전환 으로 파악 하여 긴급하지 않게 처리하는 것입니다.

useDeferredValue —이 후크는 전달 된 값의 지연된 요소를 제공하며 제공된 시간 초과까지 원래 값을 따릅니다.

SuspenseList—이 구성 요소는 예를 들어 가져온 데이터가 예측할 수없는 순서로 도착할 수있는 경우를 처리하기위한 것입니다. 덕분에 <SuspenseList>구성 요소를 오케스트레이션 할 수 있으며 UI를 점검 할 수 있습니다.

루트 API 🎴

createRootrender기능 을 대체합니다 . 새로운 API는 새로운 React 18 기능에 액세스하는 관문입니다. 점진적인 채택을 장려하고 잠재적 인 성능 비교를 완화하기위한 것입니다.

다음은 React 18에 추가 될 몇 가지 새로운 업데이트입니다.이 업데이트와 React 개발자에게 제공 할 수있는 이점과 효율성에 대해 기대 해주시기 바랍니다!

plainenglish.io 에서 더 많은 콘텐츠