React labs - React 컴파일러

다음 버전의 React는 메이저 버전이 될 것입니다. React 19입니다.
몇 년간의 반복 작업 끝에 react@canary는 이제 react@latest로 출시될 준비가 되었습니다.
새로운 기능은 앱이 실행되는 모든 환경과 호환되며, 프로덕션 사용에 필요한 모든 것을 제공합니다.

React 컴파일러

React 컴파일러는 현재 운영 중인 instagram.com에 탑재되어 있으며, 메타에서 추가로 컴파일러를 출시하고 첫 오픈 소스 릴리스를 준비하기 위해 노력하고 있습니다.
React는 상태가 변경될 때 때때로 너무 많이 다시 렌더링할 수 있습니다. React 초창기부터 이러한 경우에 대한 해결책은 수동 메모화 작업이었습니다.
- useMemo, useCallback, memo API
- 하지만 수동 메모화 작업은 코드가 복잡해지고 잘못되기 쉬우며, 최신 상태를 유지하기 위해서 추가 작업이 필요합니다.
우리의 비전은 React의 핵심 멘탈 모델을 손상시키지 않으면서 상태가 변경될 때 UI의 적절한 부분만 자동으로 다시 렌더링하는 것입니다.
React 컴파일러는 JavaScript의 규칙과 "React의 규칙"을 모두 모델링하여 코드를 안전하게 컴파일할 수 있습니다.
우리의 목표는 가능한 한 많은 코드에서 React 컴파일러가 즉시 작동하도록 하는 것입니다. 컴파일러는 코드가 React의 규칙을 엄격하게 따르지 않는 경우를 감지하여 안전한 경우에만 컴파일을 합니다.
- 코드가 React의 규칙을 따르는지 확인하고 싶은 개발자에게는 Strict 모드를 활성화하고 React의 ESLint 플러그인을 구성하는 것을 권장합니다.
컴파일러가 실제로 작동하는 모습을 보시려면 작년 가을에 있었던 강연을 확인해보세요. 강연 당시에는 instagram.com의 한 페이지에서 React 컴파일러를 사용해 본 초기 실험 데이터가 있었습니다. 그 이후로 컴파일러를 instagram.com 전체에 배포했습니다.

앞으로의 행보가 기대되며 앞으로 몇 달 안에 더 많은 소식을 공유할 수 있을 것입니다.

Actions

React server component에서 DB 변형을 실행하고 양식을 구현할 수 있도록 서버 작업을 통해 클라이언트에서 서버로 데이터를 전송하는 솔루션을 모색하고 있다고 공유한 적이 있습니다. 서버 액션을 개발하는 동안 클라이언트 전용 애플리케이션에서도 데이터 처리를 지원하도록 이러한 API를 확장했습니다.
이 광범위한 기능 모음을 간단히 "action"이라고 부릅니다. 액션을 사용하면 <form/>과 같은 DOM 요소에 함수를 전달할 수 있습니다.
```
<form action={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>
```
Action 함수는 동기 혹은 비동기로 작동할 수 있습니다.
표준 JavaScript를 사용하여 클라이언트 측에서 정의하거나 use server지시문을 사용하여 서버에서 정의할 수 있습니다.
액션을 사용할 때 React는 데이터 제출의 라이프사이클을 관리하며, 양식 액션의 현재 상태와 응답에 액세스하기 위해 useFormStatus 및 useFormState와 같은 훅을 제공합니다.
기본적으로 액션은 트랜지션 내에서 제출되므로 액션이 처리되는 동안 현재 페이지는 인터랙션이 가능한 상태로 유지됩니다.
액션은 비동기 함수를 지원하므로 transitions에서 async/await 기능을 사용할 수 있습니다.
이를 통해 fetch 같은 비동기 요청이 시작될 때 트랜지션의 isPending 상태로 보류 중인 UI를 표시하고, 업데이트가 적용되는 동안 보류 중인 UI를 계속 표시할 수 있습니다.
Action과 함께 optimistic 상태 업데이트를 관리하기 위한 useOptimistic이라는 기능을 도입합니다.
- 이 훅을 사용하면 변경 사항이 최종적으로 확정되기 전에 변경사항을 임시로 적용하며, 필요한 경우 이전 상태로 쉽게 되돌릴 수 있습니다.
- Action은 서버에 제출이 성공적으로 이루어졌다고 가정합니다. 그리고 클라이언트의 데이터 상태를 서버에서 받은 데이터 값으로 최종 설정합니다. 다시 말해, 클라이언트는 서버의 응답을 기다리지 않고도 사용자에게 피드백을 제공하며, 이는 액션이 성공적으로 완료되었다는 낙관적인 가정입니다.
- 일반 async/await를 사용하여 작동하므로 클라이언트에서 fetch를 사용하든 서버에서 서버 액션을 사용하든 동일하게 작동합니다.
라이브러리 작성자는 useTransition을 사용하여 자체 컴포넌트에 사용자 정의 action={fn} 프로퍼티를 구현할 수 있습니다.
우리의 의도는 라이브러리가 컴포넌트 API를 설계할 때 Actions 패턴을 채택하여 React 개발자에게 일관된 경험을 제공하는 것입니다.
- 예를 들어 라이브러리에서 <Calendar onSelect={eventHandler}> 컴포넌트를 제공하는 경우, <Calendar selectAction={action}> API도 노출하는 것을 고려하세요.
처음에는 client와 server간에 데이터 전송을 위한 server action에 집중했지만, React의 철학은 모든 플랫폼과 환경에 걸쳐 동일한 프로그래밍 모델을 제공하는 것입니다. 가능한 클라이언트에서 기능을 도입하면 서버에서도 작동하도록 하고, 그 반대의 경우도 마찬가지입니다.

React 19에서 추가되는 기능들

Directives
- use client와 use server는 풀스택 React 프레임워크용으로 설계된 번들러 기능입니다.
- use client는 번들러가 <script> 태그를 생성하도록 지시합니다.
- use server는 번들러가 POST 엔드포인트를 생성하도록 지시합니다.
- 이 두 가지를 함께 사용하면 관련 서버 측 로직으로 클라이언트 측 상호 작용을 구성하는 재사용 가능한 컴포넌트를 작성할 수 있습니다.
Document Metadata
- 컴포넌트의 어느 곳에서나 title, meta, link 태그를 렌더링할 수 있는 기본 지원이 추가되었습니다.
- 이러한 태그는 완전한 클라이언트 측 코드, SSR 및 RSC를 포함한 모든 환경에서 동일한 방식으로 작동합니다. 이를 통해 React Helmet과 같은 라이브러리가 지원해주는 기능을 기본으로 지원합니다.
Asset Loading
- 스타일시트, 글꼴, 스크립트와 같은 리소스의 로딩 라이프사이클에 Suspense를 통합하여 React가 이를 고려하여 style, link, script같은 요소의 콘텐츠가 표시될 준비가 되었는지 여부를 결정하도록 했습니다.
- 리소스를 로드하고 초기화해야 하는 시기를 더 잘 제어할 수 있도록 preload 및 preinit과 같은 새로운 리소스 로드 API를 추가했습니다.
Actions
- 위에서 공유한 것처럼 클라이언트에서 서버로 데이터 전송을 관리하기 위해 액션을 추가했습니다. <form/> 같은 요소에 액션을 추가하고, useFormStatus로 상태에 액세스하고, useFormState로 결과를 처리하고, useOptimistic으로 UI를 낙관적으로 업데이트할 수 있습니다.

snaag commented 6 months ago

React19 라... 저랑 동갑이네요 ㅎㅎ 친구야~

mingnuj commented 6 months ago

와 졸업 프로젝트로 react를 썼었는데 그새 많이 바뀌었군요... 흥미롭게 읽었슴다

chouung commented 6 months ago

React19 라... 저랑 동갑이네요 ㅎㅎ 친구야~

@snaag +10