React 19 버전 canary

React의 새로운 버전인 canary가 곧 latest 버전으로 출시된다.

 

Asset Loading, Document Metadata 부분에서 획기전인 변화가 있어서 18.3이 아닌 19버전으로 출시된다.

 

추가될 내용에 대해서 간단하게 살펴보자.

 

 

React Compiler

 

1. React는 상태 변경시에 너무 많이 리렌더링 되는 경우가 있다.

 

2. 초기부터 이 문제를 해결하기 위해 수동으로 memoization을 사용해왔다.

 

3. useMemo, useCallback, memo API를 적용하여 수동으로 상태변경에 따른 리렌더링을 조정했다.

 

4. 그러나 이 방법들은 코드를 지저분하게 만들고 잘못 사용하기 쉽고 최신 상태로 유지하는데 추가 작업이 필요하다.

 

5. React 팀은 상태변경시 UI의 정확한 부분만 리렌더링하는 것을 목표로 컴파일러를 구축했다.

 

6. 처음 최적화를 공부하면서 많이 헷갈렸던 memoization이었는데 이 부분이 개발하는 입장에 편해질 것으로 보인다.

 

---

 

React Canary의 새로운 기능

 

1. 이전에는 새로운 기능이 Meta 내부에서 비공개적으로 연구되고 구축되었다.

 

2. 사용자는 stable로 출시될 때만 최종적으로 볼 수 있었다.

 

3. Canary를 통해 커뮤니티의 도움으로 build하고 기능을 최종화하여 React Labs 블로그 시리즈 공유한다.

 

https://react.dev/blog

React Blog – React

 

Directives

 

1. use client는 bundler에게 <script /> 태그를 생성하도록 지시한다.

 

2. use server는 POST 엔드포인트를 생성하도록 지시한다.

 

 

Document Metadata

 

1. 컴포넌트 트리 어디에서나 <title />, <meta /> 그리고 metadata <link /> 태그를 렌더링 하기 위한 내장 지원을 추가했다.

 

2. preload, preinit을 통해 리소스가 언제 로드되고 초기화될지 제어가 가능하다.

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/font.woff2", {as: "font"});
  // ...
}

import { preinit } from 'react-dom';

function AppRoot() {
  preinit("https://example.com/style.css", {as: "style", precedence: "medium"});
  return ...;
}

 

 

Actions

 

https://cactuslog.tistory.com/10

useFormState hook으로 Form 상태를 다루자

 

1. Actions을 사용하면 <form/>과 같은 DOM 요소에 함수를 전달할 수 있다.

 

2. Action 함수는 동기적 또는 비동기적으로 작동할 수 있다.

 

3. Action을 사용할 때 React가 데이터 제출의 생명 주기를 관리해준다.

 

4. useFormStatus, useFormState와 같은 hook을 제공하여 form action의 현재 상태와 응답에 접근할 수 있다.

 

5. 비동기 요청이 시작될 때 isPending 상태로 대기 중인 UI를 표시하고, 업데이트가 적용될 때까지 대기 중인 UI를 계속해서 표시할 수 있다.

 

6. Action과 함께 낙관적 상태 업데이트를 관리하기 위한 useOptimistic 기능이 추가되었다.

 

7. submit이 성공할 것이라고 가정하고 클라이언트에서 데이터의 최종 상태를 낙관적으로 설정할 수 있으며 서버에서 받은 데이터로 되돌릴 수 있다.

 

8. 예를들면 사용자가 좋아요 버튼을 누를 경우 낙관적으로 일단 "좋아요"가 성공한 것처럼 적용하고 서버에서 요청한 후 실패했다면 다시 "좋아요"를 누르기 전으로 클라이언트 상태를 되돌린다.