https://velog.io/@typo/react-19-beta
새로운 것들
액션 리액트에서 데이터를 변경하고 이에 대한 응답을 기반으로 상태를 업데이트하는 경우가 많다. 컨벤션에 따라 비동기 트랜지션을 사용하는 함수를 “액션”이라고 한다.
- 대기 상태 -> useActionState
- 낙관적 업데이트 -> useOptimistic
- 에러처리 -> useActionState
- 양식(form) -> useActionState
- useTransition()
- useActionState()
- 비동기 함수를 받아, 해당 함수의 액션 상태를 처리
- useOptimistic()
- <form> 액션
action프로퍼티에 함수를 전달하는 기능을 추가- 액션이 성공적으로 수행됐을 시, 리액트는 자동으로 form을 제어되지 않은 컴포넌트로 재설정한다.
- useFormStatus()
- form 하위에 속한 컴포넌트가 부모 form의 상태를 prop 이나 context 없이 확인할 수 있도록 함
- use()
- 프로미스를 읽는 경우, 해당 프로미스가 resolve 될 때까지 Suspence 한다.
- 단, 렌더링 중 생성된 프로미스를 전달할 경우 경고를 표시한다. 이를 해결하려면 프로미스 캐싱을 지우너하는 서스펜스 기반 라이브러리 또는 프레임워크에서 프로미스를 전달해야한다.
- 컨텍스트를 읽을 수도 있다.
- 훅과 다른점은 조건부 호출이 가능하다는 것
리액트 서버 컴포넌트
- 서버액션
- “use server”와 함께 정의되면 프레임워크에서 자동으로 서버 함수에 대한 참조를 생성하여 클라이언트 컴포넌트로 전달한다.
- 함수가 클라이언트에서 호출되면 리액트는 함수를 호출하는 요청을 보내고, 서버는 결과를 반환한다.
개선된점
ref의 프로퍼티 화- 이젠 forwardRef가 필요없음.
- 이를 수정해주는 codemod 출시 예정
<Context.Provider>대신<Context>로 사용 가능- 문서 메타데이터 지원
- 이젠
<head>내에 없어도 컴포넌트 내에서 선언하면 리액트가 자동으로<head>내로 옮겨줌.
- 이젠
- 스타일시트 지원 (*)
- 컴포넌트 중간에
<link ref="stylesheet" href="foo" precedence="default">를 추가하여 스타일 시트를 추가할 수 있고, 순서를 지정할 수 있다. - 해당 컴포넌트에서 필요한 만큼만 css 에 선언하여 가져올 수 있다.
- 서버사이드 렌더링 중에
<head>에 해당 스타일시트를 추가하고, 브라우저가 로드될 떄까지 화면에 로드될 때까지 화면이 그려지지 않도록 한다.
- 컴포넌트 중간에
- 비동기 스크립트 지원 (*)
async스크립트는 임의의 순서로 로드되는데, 스크립트에 의존하는 컴포넌트 내에 스크립트를 추가할 수 있도록 하여 비동기 스크립트에 대한 지원을 개선함.
- 리소스 프리로딩 지원
- 컴포넌트 내에서 리소스 프리로딩 설정을 하여
<head>에 추가될 수 있도록 한다.
- 컴포넌트 내에서 리소스 프리로딩 설정을 하여