▲

GN⁺: React 19

 (github.com/facebook)
2P by neo 21일전 | favorite | 댓글 1개

19.0.0 (2024년 12월 5일)

새로운 기능

React
  • Actions: startTransition은 이제 비동기 함수를 수용할 수 있음. 이 함수들은 "Actions"라 불리며, 상태를 백그라운드에서 업데이트하고 UI를 한 번에 커밋함. Actions는 비동기 요청과 같은 부작용을 수행할 수 있으며, Transition이 완료되기 전에 작업을 기다림.
  • useActionState: Transition 내에서 Actions를 정렬하고 상태에 접근할 수 있는 새로운 훅임. 초기 상태와 reducer를 받아들임.
  • useOptimistic: Transition이 진행 중일 때 상태를 업데이트하는 새로운 훅임. Transition이 완료되면 상태가 새로운 값으로 업데이트됨.
  • use: 렌더링 시 리소스를 읽을 수 있는 새로운 API임. Promise나 Context를 수용하며, Promise가 제공되면 값이 해결될 때까지 중단됨.
  • ref를 prop으로 사용: forwardRef가 필요 없이 ref를 prop으로 사용할 수 있음.
  • Suspense 형제 프리워밍: 컴포넌트가 중단되면 React는 가장 가까운 Suspense 경계의 대체를 즉시 커밋함.
React DOM 클라이언트
  • <form> action prop: Form Actions는 자동으로 폼을 관리하고 useFormStatus와 통합함. 성공 시 폼을 자동으로 재설정함.
  • 문서 메타데이터 지원: 문서 메타데이터 태그를 컴포넌트에서 네이티브로 렌더링할 수 있음.
  • 스타일시트 지원: Suspense 경계의 콘텐츠를 공개하기 전에 클라이언트의 <head>에 스타일시트를 삽입함.
  • 비동기 스크립트 지원: 컴포넌트 트리 어디에서나 비동기 스크립트를 렌더링할 수 있음.
React DOM 서버
  • prerender 및 prerenderToNodeStream API 추가: 정적 사이트 생성을 위한 API로, Node.js 스트림 및 웹 스트림과 같은 스트리밍 환경에서 작동하도록 설계됨.
React 서버 컴포넌트
  • RSC 기능: 지시문, 서버 컴포넌트, 서버 함수가 안정화됨. 서버 컴포넌트를 포함한 라이브러리는 이제 React 19를 피어 종속성으로 타겟팅할 수 있음.

폐기 예정

  • element.ref 접근: element.props.ref를 선호하여 element.ref 접근을 폐기함.
  • react-test-renderer: React 19에서는 react-test-renderer가 폐기 경고를 기록하며 웹 사용을 위해 동시 렌더링으로 전환됨.

주요 변경 사항

React
  • 새로운 JSX 변환 필수: 번들 크기를 개선하고 React를 가져오지 않고 JSX를 사용할 수 있도록 하는 새로운 JSX 변환이 필요함.
  • 렌더링 오류가 다시 던져지지 않음: 오류가 Error Boundary에 의해 잡히지 않으면 window.reportError에 보고됨.
  • propTypes 제거: propTypes 사용이 조용히 무시됨. TypeScript로 마이그레이션을 권장함.
  • 함수의 defaultProps 제거: ES6 기본 매개변수를 대신 사용할 수 있음.
  • 문자열 refs 제거: 문자열 refs 사용을 ref 콜백으로 마이그레이션해야 함.
React DOM
  • react-dom/test-utils 제거: act를 react-dom/test-utils에서 react로 이동함. 다른 유틸리티는 제거됨.
  • ReactDOM.render, ReactDOM.hydrate 제거: 동시 렌더링을 위한 ReactDOM.createRoot 및 ReactDOM.hydrateRoot로 대체됨.

주목할 만한 변경 사항

React
  • <Context>를 제공자로 사용: <Context.Provider> 대신 <Context>를 제공자로 렌더링할 수 있음.
  • 커스텀 엘리먼트 지원: React 19는 모든 커스텀 엘리먼트 테스트를 통과함.
  • StrictMode 변경 사항: useMemo와 useCallback은 첫 번째 렌더링의 메모이제이션 결과를 재사용함.
React DOM
  • 하이드레이션 오류에 대한 차이점: 불일치가 발생할 경우, React 19는 불일치된 콘텐츠의 차이점을 포함한 단일 오류를 기록함.

TypeScript 변경 사항

  • 암시적 반환 금지: refs는 이제 정리 함수만 수용함. 암시적 반환은 오류를 발생시킴.
  • useRef의 초기 인수 필요: 초기 인수는 이제 필수임.
  • 엄격한 ReactElement 타이핑: React 요소의 props는 이제 any 대신 unknown으로 기본 설정됨.
▲
neo 21일전  [-]
Hacker News 의견

  • React를 사용하여 확장 가능한 앱을 구축하는 것이 가능하고 재미있다고 느끼는 의견이 있음

    • TS 지원과 커뮤니티 라이브러리 덕분에 쉽게 구축하고 확장할 수 있다고 생각함
    • 새로운 기능들이 사람들을 겁먹게 하는 이유를 이해하지 못함
    • Jetpack Compose와 Swift UI가 React에서 영감을 받았다는 의견이 있음
    • 과거에 jQuery나 plain JS로 대규모 웹 앱을 구축하는 것이 즐거웠는지에 대한 의문이 있음

  • React의 새로운 릴리스에 대해 긍정적인 의견을 가지고 있으나, 초보자가 시작하기 어려울 수 있다는 우려가 있음

    • React는 여전히 뛰어난 프레임워크이며 이번 릴리스는 개선점이 있다고 생각함
    • 비판은 React 자체보다는 전반적인 프론트엔드 개발에 대한 것임

  • 클라이언트 사이드 프레임워크의 복잡성이 증가하고 있다는 의견이 있음

    • 백엔드, 프론트엔드, DevOps 스택 등 모든 곳에서 복잡성이 증가하고 있다고 느끼고 있음

  • 새로운 릴리스에서 'ref as a prop' 기능이 추가되어 forwardRef가 필요 없게 된 점을 긍정적으로 평가함

  • Redux 대신 Recoil 클론인 Jotai를 언급하며, React 19와 호환 가능하다고 언급함

    • 프론트엔드 복잡성으로 인해 다른 상태 관리자가 방해가 될 수 있다고 생각함

  • 'use' API의 이름 변경을 희망하는 의견이 있음

    • React hooks를 처음 접하는 사람들이 혼란스러울 수 있다고 생각함

  • 병렬 서스펜스 문제 해결을 위해 릴리스를 지연시킨 점에 대해 긍정적으로 평가함

  • 기존 내장 훅을 기반으로 useActionState 훅을 구축할 수 있는지에 대한 의문이 있음

  • 표준 웹 기술 사용을 장려하는 기능과 삶의 질을 개선하는 기능이 추가된 점을 긍정적으로 평가함

    • 서스펜스 트리거링이 여전히 프레임워크 지원이 필요하다는 점에 실망함
    • TanStack Query를 통해 서스펜스 메커니즘을 이해하려고 했으나 성공하지 못함
답변달기