React 19 업데이트 정리

'use client';
import { useActionState, useFormStatus } from 'react';

async function submitFeedback(prevState, formData) {
  const message = formData.get('message');

  if (!message) {
    return { success: false, error: '피드백 입력' };
  }

  await fetch('/api/feedback', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message })
  });

  return { success: true };
}

export function FeedbackForm() {
  const [state, submitAction] = useActionState(submitFeedback, {
    success: false,
    error: null
  });

  return (
    <form action={submitAction} className='feedback-form'>
      <textarea name='message' placeholder='피드백 입력' />
      <SubmitButton />
      {state.error && <p className='error'>{state.error}</p>}
      {state.success && <p className='success'>제출 성공</p>}
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type='submit' disabled={pending}>
      {pending ? '전송 중…' : '제출'}
    </button>
  );
}

import LiveFeed from './LiveFeed.client.jsx';
import { getTeamStats } from './data.js';

export default async function DashboardPage() {
  const stats = await getTeamStats();

  return (
    <section>
      <h1>팀 현황</h1>
      <dl>
        <dt>완료된 작업</dt>
        <dd>{stats.completed}</dd>
        <dt>대기 중 작업</dt>
        <dd>{stats.pending}</dd>
      </dl>
      <LiveFeed />
    </section>
  );
}

// app/dashboard/LiveFeed.client.jsx
'use client';
import { useEffect, useState } from 'react';

export default function LiveFeed() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const eventSource = new EventSource('/api/live-feed');
    eventSource.onmessage = (event) => {
      setMessages((prev) => [...prev, JSON.parse(event.data)]);
    };
    return () => eventSource.close();
  }, []);

  return (
    <aside>
      <h2>실시간 피드</h2>
      <ul>
        {messages.map((item) => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    </aside>
  );
}

// app/SidebarLayout.jsx
import { useState, Activity } from 'react';

export default function SidebarLayout() {
  const [isSidebarOpen, setSidebarOpen] = useState(true);

  return (
    <div className='layout'>
      <button onClick={() => setSidebarOpen((open) => !open)}>
        {isSidebarOpen ? '사이드바 닫기' : '사이드바 열기'}
      </button>

      <Activity mode={isSidebarOpen ? 'visible' : 'hidden'}>
        <SidebarPanel />
      </Activity>
    </div>
  );
}

function SidebarPanel() {
  const [isExpanded, setExpanded] = useState(false);

  return (
    <aside className='sidebar'>
      <button onClick={() => setExpanded((value) => !value)}>
        개요 {isExpanded ? '▲' : '▼'}
      </button>
      {isExpanded && (
        <ul>
          <li>섹션 1</li>
          <li>섹션 2</li>
          <li>섹션 3</li>
        </ul>
      )}
    </aside>
  );
}

// app/ChatRoom.jsx
import { useEffect, useEffectEvent } from 'react';
import { createConnection, showToast } from './chat-api';

export default function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showToast(`Connected to room ${roomId}`, { theme });
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => onConnected());
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
}

import { Suspense } from 'react';
import { use } from 'react';

function fetchWeather() {
  return fetch('https://api.example.com/weather/seoul').then((res) =>
    res.json()
  );
}

function WeatherPanel() {
  const weather = use(fetchWeather());
  return (
    <section>
      <h2>오늘의 날씨</h2>
      <p>{weather.summary}</p>
      <p>현재 기온: {weather.temperature}°C</p>
    </section>
  );
}

export default function WeatherPage() {
  return (
    <Suspense fallback={<p>날씨 정보 불러오는 중...</p>}>
      <WeatherPanel />
    </Suspense>
  );
}

// app/articles/[slug]/page.server.jsx
import { getArticle } from './data.js';

export default async function ArticlePage({ params }) {
  const article = await getArticle(params.slug);

  return (
    <>
      <title>{article.title} | 매거진</title>
      <meta name='description' content={article.summary} />
      <link
        rel='canonical'
        href={`https://example.com/articles/${params.slug}`}
      />

      <article>
        <h1>{article.title}</h1>
        <p>{article.body}</p>
      </article>
    </>
  );
}

// components/RatingSection.jsx
import 'design-system/rating-widget';

export default function RatingSection() {
  const handleRate = (event) => {
    const { score } = event.detail;
    console.log('선택한 점수:', score);
  };

  return (
    <section>
      <h2>서비스 만족도를 평가</h2>
      <rating-widget
        value={4}
        onrate={handleRate}
        ref={(node) => node?.focus()}
      />
    </section>
  );
}