React 19 Compiler 도입: useMemo/useCallback 없이 자동 메모이제이션과 Action State 사용법

React 19 Compiler and Action State Illustration

React 19 Compiler: 자동화된 최적화의 새로운 시대

React 개발자라면 누구나 한 번쯤 useMemo와 useCallback 지옥에 빠져본 경험이 있을 것입니다. 성능을 최적화하기 위해 의존성 배열(dependency array)을 관리하다 보면, 코드는 점점 복잡해지고 버그가 발생하기 쉬워집니다.

React 19에서는 이러한 고통을 끝내줄 혁신적인 도구, React Compiler가 도입되었습니다. 이번 글에서는 React Compiler의 원리와 새로운 폼(form) 처리 훅인 useActionState의 활용법에 대해 깊이 파헤쳐보겠습니다.

React Compiler란 무엇인가?

React Compiler는 빌드 타임에 React 코드를 분석하고 자동으로 메모이제이션을 적용하는 도구입니다. 개발자가 명시적으로 useMemo나 useCallback을 작성하지 않아도, 컴파일러가 상태 변경에 따라 재렌더링이 필요한 부분과 그렇지 않은 부분을 지능적으로 판단하여 최적화된 코드를 생성합니다.

어떻게 동작할까?

이전에는 렌더링을 최적화하기 위해 아래와 같이 코드를 작성해야 했습니다:

// React 19 이전 (수동 최적화)
import { useMemo, useCallback } from 'react';

function ProductList({ products, onSelect }) {
  const activeProducts = useMemo(
    () => products.filter(p => p.isActive),
    [products]
  );

  const handleSelect = useCallback(
    (id) => onSelect(id),
    [onSelect]
  );

  return (
    <ul>
      {activeProducts.map(product => (
        <ProductItem key={product.id} item={product} onClick={handleSelect} />
      ))}
    </ul>
  );
}

React 19 컴파일러를 사용하면, 이러한 최적화 관련 코드를 모두 지울 수 있습니다:

// React 19 이후 (자동 최적화)
function ProductList({ products, onSelect }) {
  // 컴파일러가 자동으로 메모이제이션 처리!
  const activeProducts = products.filter(p => p.isActive);
  const handleSelect = (id) => onSelect(id);

  return (
    <ul>
      {activeProducts.map(product => (
        <ProductItem key={product.id} item={product} onClick={handleSelect} />
      ))}
    </ul>
  );
}

React Compiler의 장점

코드 가독성 향상: 불필요한 보일러플레이트가 제거되어 비즈니스 로직에만 집중할 수 있습니다.
휴먼 에러 방지: 누락된 의존성 배열로 인한 렌더링 버그(Stale Closure 등)를 원천 차단합니다.
일관된 성능: 개발자의 최적화 스킬과 무관하게 일정 수준 이상의 렌더링 성능을 보장합니다.

[!NOTE] React Compiler는 현재 Next.js 15와 Vite 같은 모던 빌드 툴체인에서 플러그인 형태로 제공되며, 기존 코드베이스에도 점진적으로 도입할 수 있습니다.

폼(Form) 처리의 진화: useActionState

React 19는 데이터 변형(Mutation)과 폼 처리를 혁신적으로 개선하는 여러 기능을 도입했습니다. 그 중 핵심이 바로 useActionState(과거 useFormState로 불림)입니다.

이 훅은 폼 제출 시 비동기 액션을 처리하고, 그 결과(상태)를 손쉽게 관리할 수 있게 해줍니다.

실전 예제: 회원가입 폼 구현

기존의 useState를 이용한 폼 처리 방식과 비교해보면 그 강력함을 바로 알 수 있습니다.

import { useActionState } from 'react';

// 서버 액션 시뮬레이션
async function createUser(prevState, formData) {
  const username = formData.get("username");
  
  if (username === "admin") {
    return { success: false, error: "이미 존재하는 사용자 이름입니다." };
  }
  
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { success: true, message: `환영합니다, ${username}님!` };
}

export default function SignupForm() {
  // [현재 상태, 폼 제출 액션, 비동기 대기 상태]
  const [state, formAction, isPending] = useActionState(createUser, null);

  return (
    <form action={formAction} className="signup-form">
      <div>
        <label htmlFor="username">사용자 이름</label>
        <input type="text" id="username" name="username" required />
      </div>
      
      <button type="submit" disabled={isPending}>
        {isPending ? "처리 중..." : "가입하기"}
      </button>

      {state?.error && <p className="error">{state.error}</p>}
      {state?.success && <p className="success">{state.message}</p>}
    </form>
  );
}

주요 특징

상태 관리 자동화: 로딩 상태(isPending), 에러 메시지, 결과 데이터가 하나의 훅에서 완벽하게 제어됩니다.
점진적 향상 (Progressive Enhancement): JavaScript가 비활성화된 환경에서도 네이티브 폼 제출이 가능하게 렌더링할 수 있습니다.
서버 컴포넌트와의 시너지: Next.js App Router와 같은 서버 컴포넌트 환경에서 서버 액션(Server Actions)과 결합할 때 최고의 효율을 냅니다.

결론

React 19는 개발 경험(DX)을 극적으로 향상시키는 방향으로 진화했습니다. Compiler의 도입으로 최적화라는 무거운 짐을 내려놓을 수 있게 되었고, useActionState를 통해 폼과 비동기 데이터 처리가 한결 우아해졌습니다.

이제는 코드를 어떻게 최적화할지 고민하기보다, ’무엇을 만들지’에 더 집중할 수 있는 진정한 의미의 선언적(Declarative) UI 개발 시대가 열렸습니다.