Front-end/React

리액트 19: 새로운 프론트엔드 시대를 여는 기능 정리

이안92 2025. 5. 15. 08:24
반응형

📚 React v19

 

React 19는 단순한 기능 추가를 넘어, React 개발 방식에 큰 변화를 가져올 여러 실험적 기능들을 공식화했습니다.

서버 중심의 렌더링 철학, 자동화된 성능 최적화, 간결한 API 설계로 한 단계 도약한 모습을 보여줍니다.

개인적으로 저는 커스텀 훅을 사내에서 자주 만들어 사용하는 편이라 익숙하게 Migration 가능할 것 같은데요.

이번 포스트에서는 그중 가장 주목할 만한 기능들을 정리해보겠습니다.

 

🚀 React Compiler

React 컴파일러는 자동으로 useMemo, useCallback 최적화를 수행해주는 새로운 도구입니다.
더 이상 불필요한 메모이제이션에 신경 쓰지 않아도 되는 시대가 왔습니다.

function ProductPage({ productId }) {
  const product = useProduct(productId); // 내부적으로 캐시 최적화됨
  return <Product {...product} />;
}

 

🪝 use() Hooks

use()는 비동기 데이터를 컴포넌트 안에서 직접 await할 수 있도록 도와주는 새로운 hook입니다.

Server Component에서만 사용 가능합니다.

function ProductPage() {
  const product = use(fetchProduct());
  return <Product {...product} />;
}

 

⚡ Actions

React의 새로운 폼 액션 핸들링 방식입니다. 서버 함수와 클라이언트가 자연스럽게 연결됩니다.

'use server';

export async function createTodo(data) {
  await db.insert(data);
}
<form action={createTodo}>
  <input name="task" />
  <button type="submit">Create</button>
</form>

 

📦 use client & use server

React 19에서는 컴포넌트 파일 최상단에 'use client' 또는 'use server'를 선언하여 렌더링 위치를 명시할 수 있습니다.

이를 통해 서버 컴포넌트와 클라이언트 컴포넌트 간 역할을 명확히 구분할 수 있습니다.

 

🧭 useFormStatus & useActionState

React의 새로운 form 관련 Hook들입니다.

  • useFormStatus → submit 중인지 여부를 알려줍니다.
  • useActionState → 서버 액션의 상태를 관리합니다.
const [state, formAction] = useActionState(createTodo, initialState);

<form action={formAction}>
  <SubmitButton />
</form>

 

🔮 useOptimistic

낙관적 UI 업데이트를 위한 Hook입니다. 사용자 인터랙션에 대해 빠른 피드백을 줄 수 있습니다.

const [todos, addTodo] = useOptimistic([], (state, newTodo) => [...state, newTodo]);

 

📝 Document Metadata

React에서 title, meta, viewport 등을 구성하는 새로운 API가 도입됩니다.

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Page',
  description: 'Awesome page',
};

 

⛓️ ForwardRef

React 19에서는 forwardRef 없이도 자동 ref 전달이 가능해질 예정입니다.
보다 간단한 컴포넌트 작성이 가능해집니다.

function Button(props, ref) {
  return <button ref={ref} {...props} />;
}

 

💤 React.Lazy

React.lazy()는 여전히 존재하지만, React 19에서는 Server Component 기반으로 더 나은 lazy-loading 전략이 가능해졌습니다.
대부분의 경우 서버 렌더링이 더 나은 UX를 제공합니다.

 

🔄 <Context.Provider> => <Context>

Context API도 더욱 간단하게 사용할 수 있게 되었습니다.

// 기존
<MyContext.Provider value={value}>
  <App />
</MyContext.Provider>

// React 19
<Context value={value}>
  <App />
</Context>
반응형