Blog
홈으로 돌아가기

React 19 완벽 가이드

Blog Author
🏷️reactjavascriptfrontendweb development

React 19의 새로운 기능들과 변경사항을 자세히 알아봅니다.

React 19 완벽 가이드

React 19가 정식 출시되면서 프론트엔드 개발에 많은 변화를 가져왔습니다. 이번 글에서는 React 19의 주요 기능들과 실제 사용법을 알아보겠습니다.

새로운 훅들

use() 훅

가장 주목받는 새로운 훅은 use()입니다. 이 훅을 통해 Promise와 Context를 더 쉽게 다룰 수 있습니다.

javascript
import { use, Suspense } from "react";

function UserComponent({ userPromise }) {
  // Promise를 직접 사용할 수 있습니다
  const user = use(userPromise);

  return <div>안녕하세요, {user.name}님!</div>;
}

function App() {
  const userPromise = fetch("/api/user").then((res) => res.json());

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

useOptimistic() 훅

낙관적 업데이트를 쉽게 구현할 수 있는 새로운 훅입니다:

javascript
import { useOptimistic, useState } from "react";

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (currentTodos, newTodo) => [...currentTodos, newTodo]
  );

  async function addTodo(formData) {
    const newTodo = { id: Date.now(), text: formData.get("text") };

    // 즉시 UI 업데이트
    addOptimisticTodo(newTodo);

    // 서버에 실제 요청
    try {
      const savedTodo = await saveTodo(newTodo);
      setTodos((prev) => [...prev, savedTodo]);
    } catch (error) {
      // 에러 시 자동으로 이전 상태로 롤백
      console.error("할 일 저장 실패:", error);
    }
  }

  return (
    <div>
      {optimisticTodos.map((todo) => (
        <div key={todo.id}>{todo.text}</div>
      ))}
      <form action={addTodo}>
        <input name="text" placeholder="새 할 일" />
        <button type="submit">추가</button>
      </form>
    </div>
  );
}

서버 컴포넌트 개선

향상된 성능

React 19에서는 서버 컴포넌트의 성능이 크게 개선되었습니다:

  • 스트리밍 최적화: 더 빠른 초기 페이지 로드
  • 선택적 하이드레이션: 필요한 부분만 하이드레이션
  • 메모리 사용량 감소: 서버 메모리 효율성 향상
javascript
// 서버 컴포넌트에서 비동기 데이터 처리
async function BlogPost({ id }) {
  // 서버에서 직접 데이터베이스 쿼리
  const post = await db.posts.findById(id);
  const comments = await db.comments.findByPostId(id);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <Comments comments={comments} />
    </article>
  );
}

새로운 컴파일러

React Compiler

React 19에는 새로운 컴파일러가 포함되어 자동 최적화를 제공합니다:

javascript
// 이제 수동으로 메모이제이션할 필요가 없습니다
function ExpensiveComponent({ data, filter }) {
  // 컴파일러가 자동으로 최적화
  const filteredData = data.filter((item) => item.category === filter);

  const processedData = filteredData.map((item) => ({
    ...item,
    processed: true,
  }));

  return (
    <div>
      {processedData.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

폼 처리 개선

새로운 formAction

폼 처리가 더욱 간단해졌습니다:

javascript
function ContactForm() {
  async function handleSubmit(formData) {
    "use server"; // 서버 액션

    const email = formData.get("email");
    const message = formData.get("message");

    await sendEmail({ email, message });
    redirect("/thank-you");
  }

  return (
    <form action={handleSubmit}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit">전송</button>
    </form>
  );
}

마이그레이션 팁

주요 변경사항

  1. StrictMode 강화: 개발 모드에서 더 엄격한 검사
  2. 레거시 API 제거: 일부 오래된 API가 제거됨
  3. TypeScript 지원 개선: 더 나은 타입 추론

업그레이드 체크리스트

  • React 18에서 안정적으로 작동하는지 확인
  • 사용 중단된 API 사용 여부 점검
  • 테스트 케이스 업데이트
  • 의존성 라이브러리 호환성 확인
bash
# 업그레이드 명령어
npm install react@19 react-dom@19

# 또는 yarn
yarn add react@19 react-dom@19

성능 개선사항

번들 크기 감소

  • Tree Shaking 개선: 더 정확한 사용하지 않는 코드 제거
  • 코드 스플리팅: 자동화된 청크 분할
  • 압축 최적화: 더 작은 프로덕션 번들

런타임 성능

  • 메모리 사용량 감소: 더 효율적인 메모리 관리
  • 렌더링 최적화: 불필요한 리렌더링 방지
  • 이벤트 처리: 더 빠른 이벤트 처리

결론

React 19는 개발자 경험과 성능 모두에서 큰 발전을 이뤘습니다. 새로운 훅들과 컴파일러 최적화로 더 깔끔하고 효율적인 코드를 작성할 수 있게 되었습니다.

점진적으로 새로운 기능들을 도입하면서 React 19의 장점을 최대한 활용해보세요!