[React 19] 2024년 5월 react 19 발표?

[React 문서 링크]

 

2024년 2월 15일에 React 팀에서 올린 2024년 5월에 React Conf가 있다는 글 입니다.

여기에는 React의 변경 내용을 예고하고있습니다.

 

주요 변경 내용

1. 리액트 컴파일러

선요약: 기존에 useCallback, useMemo, memo 등과 같은 메모제이션 기능등이 기본적으로 적용

리액트 컴파일러는 자바스크립트와 리액트의 규칙을 모델링하여 안전하게 코드를 컴파일합니다. 이는 컴포넌트가 동일한 입력에 대해 동일한 값을 반환해야 하며, props나 상태 값을 변경해서는 안 된다는 리액트의 규칙을 포함합니다.

 

2. Actions

선요약: 클라이언트와 서버 간 데이터 전송을 위해 Actions 기능이 도입

<form action={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>

1. Actions는 <form>과 같은 DOM 요소에 함수를 전달할 수 있게 해줍니다
2. action 함수(예시에서 search 함수)는 동기적으로 또는 비동기적으로 작동할 수 있습니다. 이는 클라이언트 측에서 정의할 수도 있고, 서버 측에서 'use server' 를 통해 정의할 수도 있습니다.
3. Actions를 사용하면, 리액트가 데이터 제출 과정의 생명 주기를 관리합니다. useFormStatus와 useFormState 같은 훅을 사용하여 폼 액션의 현재 상태와 응답에 접근할 수 있습니다.
4. Actions는 트랜지션 내에서 제출되며, 이는 액션이 처리되는 동안 현재 페이지를 동적으로 유지합니다. 비동기 함수를 지원하기 때문에, 비동기 요청이 시작될 때 isPending 상태를 사용하여 대기 중인 UI를 표시할 수 있습니다.
5. useOptimistic이라는 새로운 기능을 통해 낙관적 상태 업데이트를 관리할 수 있습니다. 이를 통해 데이터 제출이 성공한다고 가정하고 클라이언트에서 최종 상태를 낙관적으로 설정한 다음, 서버에서 받은 데이터로 되돌릴 수 있습니다.

 

3. 이외 새로운 기능들

 

use client / use server

• React 18에서 시험적으로 도입했고, NextJs 최신버전에서 기본으로 도입한 기능
• use client 명시 => 클라이언트 컴포넌트 / use server 명시 => 서버 컴포넌트

메타데이터

• 매타데이터를 컴포넌트 어디서나 렌더링 할 수 있도록 지원

Asset Loading

• 스타일시트, 폰트, 스크립트와 같은 리소스의 로딩 생명 주기에 Suspense를 통합하여, <style>, <link>, <script>와 같은 요소들의 콘텐츠가 표시될 준비가 되었는지를 리액트가 판단 가능