# React 19 > Clean Markdown view of GeekNews topic #18129. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=18129](https://news.hada.io/topic?id=18129) - GeekNews Markdown: [https://news.hada.io/topic/18129.md](https://news.hada.io/topic/18129.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2024-12-06T15:33:51+09:00 - Updated: 2024-12-06T15:33:51+09:00 - Original source: [github.com/facebook](https://github.com/facebook/react/blob/main/CHANGELOG.md) - Points: 2 - Comments: 1 ## Topic Body #### 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>`를 제공자로 렌더링할 수 있음. - **커스텀 엘리먼트 지원**: React 19는 모든 커스텀 엘리먼트 테스트를 통과함. - **StrictMode 변경 사항**: `useMemo`와 `useCallback`은 첫 번째 렌더링의 메모이제이션 결과를 재사용함. ###### React DOM - **하이드레이션 오류에 대한 차이점**: 불일치가 발생할 경우, React 19는 불일치된 콘텐츠의 차이점을 포함한 단일 오류를 기록함. ##### TypeScript 변경 사항 - **암시적 반환 금지**: refs는 이제 정리 함수만 수용함. 암시적 반환은 오류를 발생시킴. - **`useRef`의 초기 인수 필요**: 초기 인수는 이제 필수임. - **엄격한 `ReactElement` 타이핑**: React 요소의 props는 이제 `any` 대신 `unknown`으로 기본 설정됨. ## Comments ### Comment 32095 - Author: neo - Created: 2024-12-06T15:33:52+09:00 - Points: 1 ###### [Hacker News 의견](https://news.ycombinator.com/item?id=42331207) - 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를 통해 서스펜스 메커니즘을 이해하려고 했으나 성공하지 못함