Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon React 19에 도입 된 주요 기능은 무엇입니까?


React 19에 도입 된 주요 기능은 무엇입니까?


React 19는 개발자 경험 및 응용 프로그램 성능 향상을 목표로하는 몇 가지 중요한 기능을 소개합니다. 주요 업데이트는 다음과 같습니다.

React 19의 주요 기능

1. React Compiler : 실험적인 컴파일러는 반응 코드를 최적화 된 JavaScript로 변환하여 실질적인 성능 향상을 초래할 수 있습니다. 구성 요소 렌더링을 자동으로 관리하고 수동 상태 및 UI 업데이트의 필요성을 줄이고 구성 요소를 최적화하여 과도한 재 렌더링을 최소화합니다 [1] [4].

2. 서버 작업 :이 기능은 데이터 돌연변이 및 상태 업데이트를 간소화하여 클라이언트 구성 요소가 비동기 기능을 직접 호출 할 수 있도록합니다. 여기에는 내장 오류 처리가 포함되어 있으며 데이터 제출 중에 즉각적인 사용자 피드백을 제공하며`Action '및`Formaction'[2] [4]와 같은 새로운 소품으로 양식 처리를 단순화합니다.

3. RSCS (React Server 구성 요소) : RSC는 UI 구성 요소의 서버 측 렌더링을 활성화하고 초기로드 시간을 개선하고 클라이언트 번들 크기를 줄입니다. 빌드 시간 또는 각 요청에 실행될 수 있으며 서버 및 클라이언트 상호 작용 관리에 유연성을 제공합니다 [3] [4].

4. New Hooks : 몇 가지 새로운 후크가 소개되었습니다.
-`useformStatus ()`: 양식 상태를 관리하는 데 도움이됩니다.
-`useoptiomistic ()`: 낙관적 UI 업데이트를 용이하게합니다.
-`useActionState ()`: 행동과 관련된 상태 관리를 간소화합니다 [2] [3].

5. 향상된 오류보고 : 더 명확한 메시지를 제공하고 오류 로그의 복제를 줄이기 위해 오류 처리가 개선되었습니다. 새로운 루트 옵션을 사용하면 개발자가 잡힌 오류를보다 효과적으로 처리 할 수 ​​있습니다 [1] [2].

6. 사용자 정의 요소에 대한 지원 : 사용자 정의 요소에 대한 완전한 지원이 추가되어 반응이 인식 할 수없는 소품을 속성이 아닌 속성으로 취급하여 웹 구성 요소와의 통합을 향상시킬 수 있습니다 [1] [2].

7. 문서 메타 데이터 및 자산로드 : 백그라운드에서 문서 메타 데이터 및 로딩 자산을 관리하는 향상은 리소스 처리를 최적화하여 성능 및 사용자 경험을 모두 향상시킵니다 [4] [5].

8. 자동 배치 : React 19는 자동 배치를 소개합니다. 자동 배치는 렌즈를 최소화하고 성능을 최적화하기 위해 여러 상태 업데이트를 그룹화합니다 [4] [5].

9. 수화 오차보고 개선 : 수화 오류 처리가 개선되어 서버 렌더링 된 콘텐츠와 클라이언트 렌더링 된 콘텐츠 사이의 불일치를 나타내는 명확한 로그를 제공합니다 [1] [2].

이러한 기능은 총체적으로 개발 워크 플로를 간소화하고 성능을 향상 시키며 REACT로 구축 된 응용 프로그램의 전반적인 사용자 경험을 향상시키는 것을 목표로합니다.

인용 :
[1] https://react.dev/blog/2024/04/25/react-19
[2] https://www.geeksforgeeks.org/react-19-new-features-and-updates/
[3] https://www.freecodecamp.org/news/new-react-19-features/
[4] https://www.kellton.com/kellton-tech-blog/react-19-latest-features-and updates
[5] https://dev.to/ricardogesteves/react-19-new-features-and-improvements-2fk6
[6] https://www.bacancytechnology.com/blog/whats-new-in-react-19
[7] https://www.freecodecamp.org/news/whats-new-in-react-19/
[8] https://code.pieces.app/blog/react-19-correhension-guide