# 2025년 React 트렌드

> Clean Markdown view of GeekNews topic #19924. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19924](https://news.hada.io/topic?id=19924)
- GeekNews Markdown: [https://news.hada.io/topic/19924.md](https://news.hada.io/topic/19924.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-03-24T10:11:01+09:00
- Updated: 2025-03-24T10:11:01+09:00
- Original source: [robinwieruch.de](https://www.robinwieruch.de/react-trends/)
- Points: 16
- Comments: 1

## Summary

React는 클라이언트-서버 경계를 허무는 풀스택 프레임워크로 진화하고 있으며, Next.js의 독점적 지위가 약화되면서 TanStack Start와 React Router가 경쟁자로 부상하고 있습니다. React Server Components와 React Server Functions의 도입으로 성능 최적화와 데이터베이스 접근이 가능해지며, React의 폼 기능도 대폭 개선되었습니다. 또한, React는 AI 도구와의 통합을 통해 AI 기반 애플리케이션 구축 가능성이 증가하고 있으며, Biome과 React Compiler 같은 새로운 도구들이 성능 최적화와 개발 편의성을 높이고 있습니다.

## Topic Body

- 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에서 베타 버전 제공 중

## Comments



### Comment 36267

- Author: xguru
- Created: 2025-03-24T10:12:01+09:00
- Points: 1

[React는 풀스택 프레임워크(가 되어가는 중)임](https://news.hada.io/topic?id=16471)  
[React 기술 스택 2025](https://news.hada.io/topic?id=19538)  
[2024년 React 트렌드](https://news.hada.io/topic?id=13489)