React 19의 핵심 업데이트 사항과 관련 이슈 살펴보기

// Before Actions function UpdateName({}) { const [name, setName] = useState(""); const [error, setError] = useState(null); const [isPending, setIsPending] = useState(false); const handleSubmit = async () => { setIsPending(true); // pending 상태 수동 설정 const error = await updateName(name); setIsPending(false); // pending 상태 수동 설정 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> ); }

// Using pending state from Actions function UpdateName({}) { const [name, setName] = useState(""); const [error, setError] = useState(null); const [isPending, startTransition] = useTransition(); const handleSubmit = () => { 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> ); }

// App.js "use client"; import {updateName} from './actions'; function UpdateName() { // updateName은 action. {error: null} 은 초기 값. const [state, submitAction, isPending] = useActionState(updateName, {error: null}); return ( <form action={submitAction}> <input type="text" name="name" disabled={isPending}/> {state.error && <span>Failed: {state.error}</span>} </form> ); } // actions.js "use server"; export async function updateName(name) { if (!name) { // 이 상황에서 return 값은 useActionState의 새로운 state가 된다. return {error: 'Name is required'}; } await db.users.updateName(name); }

import {useFormStatus} from 'react-dom'; function DesignButton() { const {pending} = useFormStatus(); return <button type="submit" disabled={pending} /> }

// App.js import { useOptimistic, useState, useRef } from "react"; import { deliverMessage } from "./actions.js"; function Thread({ messages, sendMessage }) { const formRef = useRef(); const [optimisticMessages, addOptimisticMessage] = useOptimistic( messages, // state는 currentState를 의미한다. // newMessage는 optimisticValue를 의미한다. (state, newMessage) => [ ...state, // 여기서 사용자가 입력한 optimistic value인 newMessage가 설정되고, sending 상태가 된다. { text: newMessage, sending: true } ] ); async function formAction(formData) { // 사용자가 입력한 value를 가지고 addOptimisticMessage를 호출한다. // 넘기는 파라미터는 위 useOptimistic callback에서 newMessage에 해당되게 된다. addOptimisticMessage(formData.get("message")); formRef.current.reset(); await sendMessage(formData); } return ( <> {optimisticMessages.map((message, index) => ( <div key={index}> {message.text} {!!message.sending && <small> (Sending...)</small>} </div> ))} <form action={formAction} ref={formRef}> <input type="text" name="message" placeholder="Hello!" /> <button type="submit">Send</button> </form> </> ); } export default function App() { const [messages, setMessages] = useState([ { text: "Hello there!", sending: false, key: 1 } ]); async function sendMessage(formData) { const sentMessage = await deliverMessage(formData.get("message")); setMessages((messages) => [...messages, { text: sentMessage }]); } return <Thread messages={messages} sendMessage={sendMessage} />; } // actions.js export async function deliverMessage(message) { await new Promise((res) => setTimeout(res, 1000)); return message; }

import {use} from 'react'; function Comments({commentsPromise}) { // commentsPromise가 resolve 되기 전 까지 suspend 상태가 된다. const comments = use(commentsPromise); return comments.map(comment => <p key={comment.id}>{comment}</p>); } function Page({commentsPromise}) { // promise가 resolve 되기 전까지 Suspense의 fallback이 표시된다. return ( <Suspense fallback={<div>Loading...</div>}> <Comments commentsPromise={commentsPromise} /> </Suspense> ) }

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

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> ); }

function ComponentOne() { return ( <Suspense fallback="loading..."> <link rel="stylesheet" href="foo" precedence="default" /> <link rel="stylesheet" href="bar" precedence="high" /> <article class="foo-class bar-class"> {...} </article> </Suspense> ) } function ComponentTwo() { return ( <div> <p>{...}</p> <link rel="stylesheet" href="baz" precedence="default" /> <-- foo & bar 사이에 추가됩니다. </div> ) }

import { prefetchDNS, preconnect, preload, preinit } from 'react-dom' function MyComponent() { preinit('https://.../path/to/some/script.js', {as: 'script' }) // 외부 스크립트, 스타일시트를 가져와서 삽입할 수 있다. preload('https://.../path/to/font.woff', { as: 'font' }) // 사용할 스타일시트, 글꼴, 이미지 또는 외부 스크립트를 가져올 수 있다. preload('https://.../path/to/stylesheet.css', { as: 'style' }) // 사용할 스타일시트, 글꼴, 이미지 또는 외부 스크립트를 가져올 수 있다. prefetchDNS('https://...') // 연결하려는 DNS 도메인 이름의 IP 주소를 미리 가져올 수 있다. preconnect('https://...') // 아직 어떤 리소스가 필요한지 모르는 경우에도 리소스를 요청할 것으로 예상되는 서버에 연결할 수 있다. }

<!-- the above would result in the following DOM/HTML --> <html> <head> <!-- links/scripts are prioritized by their utility to early loading, not call order --> <link rel="prefetch-dns" href="https://..."> <link rel="preconnect" href="https://..."> <link rel="preload" as="font" href="https://.../path/to/font.woff"> <link rel="preload" as="style" href="https://.../path/to/stylesheet.css"> <script async="" src="https://.../path/to/some/script.js"></script> </head> <body> ... </body> </html>

// 렌더링 시 호출 import { preconnect } from 'react-dom'; function AppRoot() { preconnect("https://example.com"); return ...; } // 이벤트 핸들러에서 호출 import { preconnect } from 'react-dom'; function CallToAction() { const onClick = () => { preconnect('http://example.com'); startWizard(); } return ( <button onClick={onClick}>Start Wizard</button> ); }

<Suspense> <Foo /> <Bar /> </Suspense>