2025년 React 트렌드

• React는 클라이언트-서버 경계를 허무는 풀스택 프레임워크로 진화 중
• Next.js의 독점적 지위가 약화되며 TanStack Start 및 React Router가 경쟁자로 부상
• React의 폼, 상태 관리, 서버 컴포넌트, AI 도입 등 기능이 강화됨
• React 개발자는 앞으로 풀스택 환경에 익숙해질 필요가 있음

React Server Components (RSC)

• React Server Components (RSC) 는 클라이언트 측 JavaScript 번들 크기를 줄이고 성능을 최적화하는 기능
  • 최초 발표: 2020년 12월 21일
  • 첫 구현: Next.js 13 (2022년)에서 App Router 도입
  • Next.js 15 (2024년)에서 보다 안정적인 상태에 도달
  • React Router 및 TanStack Start에서도 곧 RSC를 도입할 것으로 예상됨
• RSC의 동작 방식
  • 서버에서 한 번 실행되고 렌더링된 결과만 클라이언트에 전송
  • 클라이언트 측 JavaScript 양 감소
  • 서버에서 데이터베이스 및 API 접근 가능 (보안 강화)

React Server Functions (RSF)

• React Server Actions (RSA) → RSC에서 발전한 형태로, 서버에서 데이터를 수정 및 업데이트 가능
  • API 라우트를 정의하지 않고 원격 프로시저 호출(RPC) 방식으로 서버 함수 실행
  • use server 디렉티브 사용
• React Server Functions (RSF)
  • 2024년 9월 React 팀이 RSA를 포함한 포괄적 개념으로 RSF 발표
  • RSC 및 클라이언트 컴포넌트에서 모두 작동 가능
  • 데이터 읽기 및 수정 작업 모두 포함
• Next.js, TanStack Start, React Router에서 구현 예정

React Forms 개선 사항

• React 19에서 폼 관련 기능 대폭 개선
  • <form>의 action 속성을 통해 서버 액션 직접 호출 가능
  • 새로운 훅 추가
    • useFormStatus, useOptimistic, useActionState
  • 복잡한 폼 상태 관리 개선
• 기존 라이브러리와 호환 가능
  • React Hook Form 같은 기존 라이브러리도 계속 사용 가능
  • React의 자체 폼 처리 기능이 더 강력하고 유연해짐

Library vs Framework (라이브러리 vs 프레임워크)

• React는 이제 단순한 라이브러리를 넘어 프레임워크의 성격을 띔
  • 클라이언트 렌더링(CSR), 서버 사이드 렌더링(SSR), 정적 생성(SSG), 증분 정적 재생성(ISR) 지원
  • 특정 프레임워크(예: Next.js)를 사용해야 RSC 및 RSF 기능 사용 가능
• 프로젝트 요구사항에 따른 선택 필요
  • 단순 클라이언트 앱 → React 자체 사용 가능
  • 서버 측 기능 필요 → Next.js, TanStack Start, React Router 같은 프레임워크 필요

React Frameworks 경쟁 심화

• Next.js가 여전히 가장 인기 있는 프레임워크
• TanStack Start와 React Router가 2025년에 경쟁자로 부상할 가능성 높음
  • TanStack Start → TanStack Router 기반의 새로운 프레임워크
  • React Router → Remix에서 발전한 형태로 프레임워크 성격 강화
• 두 프레임워크 모두 RSC 및 RSF 지원 예정

Full-Stack React

• React의 서버 중심 기능 도입 → 풀스택 애플리케이션으로 발전 중
  • RSC 및 RSF를 통한 데이터베이스 접근 가능
  • 인증, 권한, 캐싱 등 백엔드 인프라 필요
  • 클라이언트-서버 간 통신도 간소화됨
• React 기반의 AI 애플리케이션 구축 가능성 증가

React의 "Shadcnification"

• Shadcn UI → Tailwind CSS처럼 React의 기본 UI 라이브러리로 자리잡음
  • 사전 스타일링된 컴포넌트 제공
  • 사용자 정의 가능
• 새로운 UI 접근 방식 등장 가능성
  • 현재 프로젝트들이 비슷해 보이는 현상 발생

React와 AI

• AI 기반 React 코드 생성 증가
  • AI 도구(v0 등)에서 React 코드 자동 생성
• AI 지원 애플리케이션 구축 증가
  • Vercel의 AI SDK, LangChain 등 지원

Biome (구 Rome)

• ESLint 및 Prettier 통합 문제 해결
• Rust 기반의 빠르고 일관된 도구
  • Prettier의 $20,000 상금 획득 (2023년)
• Biome → 차세대 React 툴체인으로 자리잡을 가능성 높음

React Compiler

• React Compiler → 성능 최적화 자동화 도구
  • useCallback, useMemo, memo를 자동으로 처리
  • 수동 메모이제이션 필요 없음
  • React 19에서 베타 버전 제공 중