React 19 새 기능 — use, Actions, 그리고 달라진 것들

import { use, Suspense } from 'react';

function UserProfile({ userPromise }) {
  // Promise가 resolve될 때까지 가장 가까운 Suspense의 fallback을 보여줌
  const user = use(userPromise);

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

function App() {
  const userPromise = fetchUser(1); // Promise를 생성

  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

function StatusMessage({ isSpecial }) {
  // 조건문 안에서 use 호출 가능 — 기존 useContext로는 불가능했음
  if (isSpecial) {
    const theme = use(ThemeContext);
    return <p style={{ color: theme.primary }}>특별 메시지</p>;
  }
  return <p>일반 메시지</p>;
}

import { useActionState } from 'react';

function UpdateProfile() {
  const [state, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const name = formData.get('name');
      try {
        await updateUser({ name });
        return { success: true, message: '프로필이 업데이트되었습니다' };
      } catch (error) {
        return { success: false, message: error.message };
      }
    },
    null // 초기 상태
  );

  return (
    <form action={submitAction}>
      <input name="name" placeholder="이름" />
      <button type="submit" disabled={isPending}>
        {isPending ? '저장 중...' : '저장'}
      </button>
      {state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
    </form>
  );
}

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? '처리 중...' : '제출'}
    </button>
  );
}

function ContactForm() {
  async function handleSubmit(formData) {
    await sendMessage(formData);
  }

  return (
    <form action={handleSubmit}>
      <textarea name="message" />
      <SubmitButton /> {/* 폼 상태를 자동으로 인식 */}
    </form>
  );
}

import { useOptimistic } from 'react';

function TodoList({ todos, addTodoAction }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (currentTodos, newTodoText) => [
      ...currentTodos,
      { id: 'temp', text: newTodoText, sending: true },
    ]
  );

  async function handleSubmit(formData) {
    const text = formData.get('todo');
    addOptimisticTodo(text); // 즉시 UI 업데이트
    await addTodoAction(text); // 서버에 실제 저장
  }

  return (
    <div>
      <form action={handleSubmit}>
        <input name="todo" />
        <button type="submit">추가</button>
      </form>
      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id} style={{ opacity: todo.sending ? 0.5 : 1 }}>
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

// React 18 이전 — forwardRef 필수
const Input = forwardRef(function Input(props, ref) {
  return <input ref={ref} {...props} />;
});

// React 19 — 일반 prop으로 받기
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

// 둘 다 같은 방식으로 사용
function Form() {
  const inputRef = useRef(null);
  return <Input ref={inputRef} placeholder="입력" />;
}

// React Compiler가 자동으로 최적화하므로
// 개발자가 직접 useMemo/useCallback을 작성할 필요가 줄어듦

// 이전: 수동 메모이제이션
function ProductList({ products, onSelect }) {
  const sorted = useMemo(
    () => products.sort((a, b) => a.price - b.price),
    [products]
  );
  const handleSelect = useCallback(
    (id) => onSelect(id),
    [onSelect]
  );
  return sorted.map(p => (
    <ProductItem key={p.id} product={p} onSelect={handleSelect} />
  ));
}

// React Compiler 사용 시: 그냥 작성하면 됨
function ProductList({ products, onSelect }) {
  const sorted = products.sort((a, b) => a.price - b.price);
  return sorted.map(p => (
    <ProductItem key={p.id} product={p} onSelect={() => onSelect(p.id)} />
  ));
}

function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.summary} />
      <meta property="og:title" content={post.title} />
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';

function App() {
  preinit('https://cdn.example.com/main.js', { as: 'script' });
  preload('https://cdn.example.com/font.woff2', { as: 'font' });
  preconnect('https://api.example.com');

  return <div>앱 내용</div>;
}

// 하이드레이션 에러 시 더 상세한 정보 제공
// 이전: "Text content does not match"
// React 19: 구체적인 불일치 내용과 위치를 표시

function Component() {
  return (
    <div ref={(node) => {
      // 마운트 시
      node.style.opacity = '1';

      // 언마운트 시 cleanup — React 19 새 기능
      return () => {
        node.style.opacity = '0';
      };
    }}>
      내용
    </div>
  );
}

// ❌ 렌더링 중 Promise 생성 — 무한 루프
function Bad({ id }) {
  const data = use(fetchUser(id)); // 매 렌더마다 새 Promise
}

// ✅ 부모에서 Promise를 생성하여 전달
function Parent({ id }) {
  const promise = useMemo(() => fetchUser(id), [id]);
  return <Child userPromise={promise} />;
}