React에서 무엇이 바뀌었나요?

개발자로서 사용하는 기술에 대한 최신 정보를 유지해야 합니다. 최근 React 버전 19가 안정되었습니다. 이번 포스팅에서는 버전 19에 적용된 변경 사항을 살펴보실 수 있습니다.

포스트는 두 부분으로 구성되어 있는데, 첫 번째는 버전 19의 새로운 점과 React에서 어떤 부분이 개선되었는지에 대한 것입니다. 소식 전, 어떤 점이 개선됐는지 살펴볼까요?

참조를 소품으로 제공

ref를 props로 전달하려면 ForwardRef를 사용해야 하는데 이는 중복됩니다. 여기에 작성된 코드는 다음과 같습니다.

이제 심판을 props로 직접 부여할 수 있습니다

참조 정리 기능

참조가 구성 요소에 사용되는 경우 해당 구성 요소가 UI에서 마운트 해제될 때 참조를 지워야 합니다. 이는 효율적인 메모리 관리와 예상치 못한 상황을 방지하는 데 중요합니다. 이전 버전에서는 useEffect의 반환 부분에 이 내용이 작성되었습니다:

버전 19에서 변경 후 위의 코드는 다음과 같이 작성됩니다.

useDeferredValue에 초기값을 할당하는 옵션

initialValue가 주어진 이유를 이미 알고 있으므로 다음 섹션으로 넘어갈 수 있습니다.)

메타데이터 지원

원하는 페이지에

meta, 제목과 같은 메타 요소를 할당하려면 useEffect나 반응 헬멧과 같은 라이브러리를 사용해야 했습니다.

버전 19에는 이러한 태그를 직접 사용할 수 있는 기능이 추가되었습니다.

은 React 구성 요소를 렌더링할 때 자동으로

요소에 메타 태그를 래핑합니다.

지원 스타일

이 버전은 또한 스타일 최적화에 초점을 맞춰 적시에 스타일을 다운로드하는 기능과 우선 순위 속성을 추가했습니다. 이 속성은 스타일이 DOM에 추가되는 순서를 제어합니다. 스타일은 종속 구성요소가 마운트되기 전에 로드됩니다.

비동기 스크립트 지원

스타일과 마찬가지로 비동기 스크립트도 원하는 시간에 다운로드할 수 있습니다. 스타일과 비동기 스크립트를 로드하는 구성 요소는 처음 로드할 때 캐시되기 때문에 여러 장소에서 사용될 때 다시 다운로드할 걱정이 없습니다. )

리소스 미리 로드

리소스를 최대한 빨리 다운로드하는 것은 사이트 성능에 좋은 영향을 미칩니다. 이 기능을 활용하기 위해 React 19에서 새로운 API가 발표되었습니다. 다음은

preinit - 리소스(스크립트 또는 모듈)를 빠르게 다운로드하고 사용합니다.
preload - 리소스를 미리 다운로드합니다. 이 경우 로드된 리소스(글꼴, 스타일)를 빠르게 사용할 필요가 없습니다.
preconnect - 리소스를 로드하려는 서버에 대한 연결을 열어 리소스 로드 시간을 단축합니다.
prefetchDNS는 연결을 생성하지 않고 요청이 이루어지기 전에 리소스를 다운로드하고 캐시한다는 점을 제외하면 사전 연결과 유사하게 작동합니다.

맞춤 요소 지원

React는 이전 버전에서 커스텀 요소를 사용할 때 props를 인식하지 못했는데, 새 버전부터는 문제 없이 사용할 수 있습니다. 맞춤 요소의 예 -> <내 요소 />.

참고 - 일부 장소에서는 코드를 통해 예제가 제공되지 않습니다. 여기에서 예제를 볼 수 있습니다

위 내용은 React에서 무엇이 바뀌었나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!