React 19 Beta

React 19 Beta – React

새롭게 추가된 기능

Actions

1. useTransition

   SWR, React-query등에서 제공하는 async function 기능 기본 제공 - loading, error, form, 등

   function UpdateName({}) {
     const [name, setName] = useState("");
     const [error, setError] = useState(null);
     const [isPending, startTransition] = useTransition();
   
     const handleSubmit = async () => {
       startTransition(async () => {
         const error = await updateName(name);
         if (error) {
           setError(error);
           return;
         } 
         redirect("/path");
       })
     };
   
     return (
       <div>
         <input value={name} onChange={(event) => setName(event.target.value)} />
         <button onClick={handleSubmit} disabled={isPending}>
           Update
         </button>
         {error && <p>{error}</p>}
       </div>
     );
   }

2. useActionState

   form - action에 사용할 수 있는 useTransition과 동일한 기능

   function ChangeName({ name, setName }) {
     const [error, submitAction, isPending] = useActionState(
       async (previousState, formData) => {
         const error = await updateName(formData.get("name"));
         if (error) {
           return error;
         }
         redirect("/path");
       }
     );
   
     return (
       <form action={submitAction}>
         <input type="text" name="name" />
         <button type="submit" disabled={isPending}>Update</button>
         {error && <p>{error}</p>}
       </form>
     );
   }

3. 새로운 기능과 함께 Action 통합. formAction props로 함수를 전달해 자동으로 양식 제출 가능

   action이 성공하면 자동으로 reset (수동 reset - requestFormReset 사용)

4. React DOM: useFormStatus 🆕

   context 사용한 것처럼 부모 컴포넌트의 Action 상태 전달

   function DesignButton() {
     const {pending} = useFormStatus();
     return <button type="submit" disabled={pending} />
   }

5. useOptimistic 🆕

   react query의 optimisic updates와 동일한 기능

   응답 결과가 오기 전, 요청이 성공했다는 가정하에 UI를 먼저 변화해서 보여줌

   const [optimisticName, setOptimisticName] = useOptimistic(currentName);
   
   const submitAction = async formData => {
     const newName = formData.get("name");
     setOptimisticName(newName);
     const updatedName = await updateName(newName);
   	// ...
   };
   
   ...
   <p>Your name is: {optimisticName}</p>

   요청이 성공하거나 실패하는 경우에 opimisticName이 자동으로 currentName 값으로 변경

6. use 🆕 ⭐

   <Suspense> 선언시, 자동으로 suspend 진행

   function Comments({commentsPromise}) {
     // `use` will suspend until the promise resolves.
     const comments = use(commentsPromise);
     return comments.map(comment => <p key={comment.id}>{comment}</p>);
   }
   
   function Page({commentsPromise}) {
     // When `use` suspends in Comments,
     // this Suspense boundary will be shown.
     return (
       <Suspense fallback={<div>Loading...</div>}>
         <Comments commentsPromise={commentsPromise} />
       </Suspense>
     )
   }

   context와 함께 사용하면 useContext와 유사한 동작을 한다.

   차이점이 있다면, if등의 조건문 연산자 내부에서도 사용할 수 있다.

   function HorizontalRule({ show }) {
     if (show) {
       const theme = use(ThemeContext);
       return <hr className={theme} />;
     }
     return false;
   }

React Server Component

1. Server Components

   서버 컴포넌트 기능 제공 (Nextjs의 Server Component와 유사)

   async function Note({id}) {
     // NOTE: loads *during* render.
     const note = await db.notes.get(id);
     return (
       <div>
         <Author id={note.authorId} />
         <p>{note}</p>
       </div>
     );
   }
   
   async function Author({id}) {
     // NOTE: loads *after* Node,
     // but is fast if data is co-located.
     const author = await db.authors.get(id);
     return <span>By: {author.name}</span>;
   }

2. Server Actions

   “user server”를 선언하면 클라이언트 컴포넌트가 server에서 실행되는 async function 실행

   "use server";
   
   export async function createNoteAction() {
   	// 2. 서버세어 실행
     await db.notes.create();
   }

   "use client";
   import {createNoteAction} from './actions';
   
   function EmptyNote() {
     console.log(createNoteAction);
   	 
   	// 1. client에서 실행하면
     <button onClick={createNoteAction} />
   }

향상된 기능

1. forwardRef 사용없이, 두번째 props로 ref를 선언 가능 ⭐

   function MyInput({placeholder, ref}) {
     return <input placeholder={placeholder} ref={ref} />
   }
   
   //...
   <MyInput ref={ref} />

   추후에는 forwardRef도 제거할 계획

2. react-dom error message 개선

   기존 여러개 나오던 에러 메세지를 하나로 병합

3. <Context.Provider> → <Context/>

4. ref callback cleanup 함수 제공

   <input
     ref={(ref) => {
       // ref created
   
       // NEW: return a cleanup function to reset
       // the ref when element is removed from DOM.
       return () => {
         // ref cleanup
       };
     }}
   />

   기존에는 언마운트시, 컴포넌트의 ref function을 null로 반환했는데 callback function을 사용하면 이 과정 생략

5. useDefferedValud의 초기값 설정

   function Search({deferredValue}) {
     // On initial render the value is ''.
     // Then a re-render is scheduled with the deferredValue.
     const value = useDeferredValue(deferredValue, '');
     
     return (
       <Results query={value} />
     );
   }

6. 메타태그 개선

   function BlogPost({post}) {
     return (
       <article>
         <h1>{post.title}</h1>
         <title>{post.title}</title>
         <meta name="author" content="Josh" />
         <link rel="author" href="https://twitter.com/joshcstory/" />
         <meta name="keywords" content={post.keywords} />
         <p>
           Eee equals em-see-squared...
         </p>
       </article>
     );
   }

   , <meta> 등의 태그를 어디서나 호출해도 호이스팅해서 <head> 태그 내에 위치한 것처럼 처리

7. 스타일 시트 지원

   function ComponentOne() {
     return (
       <Suspense fallback="loading...">
         <link rel="stylesheet" href="foo" precedence="default" />
         <link rel="stylesheet" href="bar" precedence="high" />
       </Suspense>
     )
   }
   
   function ComponentTwo() {
     return (
       <div>
         <p>{...}</p>
         <link rel="stylesheet" href="baz" precedence="default" />  <-- will be inserted between foo & bar
       </div>
     )
   }

   • 멀리 떨어진곳에서 스타일시트 선언해도 로드 가능. 우선순위 지정 가능
   • 서버 > 스타일시트를 에 포함
   • 클라이언트 > 새로 렌더링된 스타일시트 로드 전까지 대기. 문서에 스타일시트 한 번만 포함

8. script 지원

   스타일 시트와 동일. 어디서든 호출 가능

9. preload 기능 개선