🌟 Awesome React

React 개발자를 위한 최고의 컴포넌트, 라이브러리, 도구 모음
2025년 최신 트렌드와 검증된 도구들을 한곳에 모았습니다.

🧩 핵심 라이브러리

React 코어

• React ⭐ 229k – 사용자 인터페이스 구축 라이브러리
• React DOM – React DOM 렌더러
• React Native ⭐ 119k – 네이티브 모바일 앱 개발
• Preact ⭐ 37k – 3KB 경량 React 대안

메타프레임워크

• Next.js ⭐ 127k – React 프로덕션 프레임워크
• Remix ⭐ 30k – 웹 표준 중심 풀스택 프레임워크
• Gatsby ⭐ 55k – 정적 사이트 생성기
• Astro ⭐ 47k – 현대적 정적 사이트 빌더

개발 도구

• Create React App ⭐ 103k – React 애플리케이션 생성 도구
• Vite ⭐ 69k – 차세대 빌드 도구
• React DevTools – React 개발자 도구
• Storybook ⭐ 84k – UI 컴포넌트 개발 도구

🎨 UI 컴포넌트

디자인 시스템

• Material-UI (MUI) ⭐ 94k – React Material Design
• Ant Design ⭐ 92k – 엔터프라이즈 UI 라이브러리
• Chakra UI ⭐ 38k – 간단하고 모듈러한 UI
• Mantine ⭐ 27k – 현대적 React 컴포넌트 라이브러리

Headless UI

• Headless UI ⭐ 26k – Tailwind의 완전한 스타일링 없는 UI
• Radix UI ⭐ 16k – 접근성 중심 컴포넌트
• React Aria ⭐ 13k – Adobe의 접근성 라이브러리
• Ariakit ⭐ 8k – 접근 가능한 UI 컴포넌트

CSS-in-JS

• styled-components ⭐ 41k – CSS-in-JS 라이브러리
• Emotion ⭐ 17k – 고성능 CSS-in-JS 라이브러리
• Stitches ⭐ 8k – 제로 런타임 CSS-in-JS
• Vanilla Extract ⭐ 9k – 제로 런타임 스타일링

유틸리티 CSS

• Tailwind CSS ⭐ 83k – 유틸리티 우선 CSS 프레임워크
• Twind ⭐ 4k – Tailwind-in-JS 솔루션

🔀 상태 관리

전역 상태

• Redux ⭐ 61k – 예측 가능한 상태 컨테이너
• Redux Toolkit ⭐ 11k – Redux 공식 도구 세트
• Zustand ⭐ 48k – 작고 빠른 상태 관리
• Jotai ⭐ 19k – 원시적이고 유연한 상태 관리

서버 상태

• TanStack Query ⭐ 42k – 서버 상태 관리 (구 React Query)
• SWR ⭐ 31k – 데이터 페칭 라이브러리
• Apollo Client ⭐ 19k – GraphQL 클라이언트
• Relay ⭐ 18k – GraphQL 클라이언트

폼 상태

• React Hook Form ⭐ 41k – 고성능 폼 라이브러리
• Formik ⭐ 34k – 폼 작성 라이브러리
• React Final Form ⭐ 7k – 고성능 구독 기반 폼
• Zod ⭐ 34k – TypeScript 우선 스키마 검증

🛣️ 라우팅

클라이언트 라우팅

• React Router ⭐ 53k – 선언적 라우팅
• Reach Router ⭐ 7k – React Router에 병합됨
• Wouter ⭐ 7k – 미니멀한 라우터
• TanStack Router ⭐ 8k – 타입 안전 라우터

서버 라우팅

• Next.js Router – Next.js 내장 라우터
• Remix Router – Remix 파일 기반 라우팅

🧪 테스팅

테스팅 프레임워크

• Jest ⭐ 44k – JavaScript 테스팅 프레임워크
• Vitest ⭐ 13k – Vite 네이티브 테스트 러너
• React Testing Library ⭐ 19k – React 컴포넌트 테스팅
• Enzyme ⭐ 20k – JavaScript 테스팅 유틸리티

E2E 테스팅

• Playwright ⭐ 67k – 브라우저 자동화
• Cypress ⭐ 47k – E2E 테스팅 프레임워크
• Puppeteer ⭐ 89k – Chrome 자동화

스토리북 테스팅

• Chromatic – 시각적 회귀 테스팅

🔧 개발 도구

린팅 & 포매팅

• ESLint ⭐ 25k – JavaScript 코드 분석 도구
• Prettier ⭐ 49k – 코드 포매터
• eslint-plugin-react ⭐ 9k – React ESLint 플러그인
• eslint-plugin-react-hooks – React Hooks ESLint 플러그인

타입 시스템

• TypeScript ⭐ 101k – JavaScript 타입 시스템
• PropTypes ⭐ 4k – React props 타입 체킹
• @types/react – React TypeScript 타입 정의

빌드 도구

• Webpack ⭐ 65k – 모듈 번들러
• Rollup ⭐ 25k – ES 모듈 번들러
• esbuild ⭐ 38k – 초고속 JavaScript 번들러
• SWC ⭐ 31k – Rust 기반 JavaScript 컴파일러

📚 학습 자료

공식 문서

• React 공식 문서 – React 공식 학습 가이드
• React Native 문서 – React Native 공식 문서
• Next.js 문서 – Next.js 공식 가이드

온라인 학습

• React Tutorial – React 공식 튜토리얼
• Full Stack Open – 헬싱키 대학교 React 코스
• Epic React – Kent C. Dodds의 React 마스터 코스
• React Patterns – React 패턴 모음

도서

• Learning React – O'Reilly
• React: Up & Running – O'Reilly
• The Road to React – Robin Wieruch

커뮤니티

• r/reactjs – Reddit React 커뮤니티
• React Discord – React 개발자 채팅
• React Korea – 한국 React 사용자 그룹

🆕 2025 Highlights

주요 트렌드

• React Server Components: 서버에서 렌더링되는 컴포넌트
• Concurrent Features: 동시성 기능으로 더 나은 사용자 경험
• Zero Bundle Size Components: 번들 크기가 0인 컴포넌트
• Streaming SSR: 점진적 서버 사이드 렌더링

React 18+ 새 기능

• Automatic Batching: 자동 배칭으로 성능 향상
• Suspense for Data Fetching: 데이터 페칭용 Suspense
• startTransition: 긴급하지 않은 업데이트 표시
• useDeferredValue: 지연된 값 처리

2025년 혁신 도구

• Vite: Create React App을 대체하는 새로운 표준
• TanStack Query v5: 서버 상태 관리의 새로운 기준
• Zustand: Redux보다 간단한 상태 관리
• Radix UI: Headless UI 컴포넌트의 표준

AI와 React

• GitHub Copilot: React 컴포넌트 자동 생성
• v0.dev: Vercel의 AI 기반 UI 생성 도구
• Cursor: AI 기반 React 개발 환경

성능 최적화

• React Compiler: 자동 메모이제이션
• Server Components: 서버 렌더링으로 번들 크기 감소
• Streaming: 점진적 페이지 로딩
• Edge Runtime: 엣지에서 React 실행

한국 React 생태계

• 토스: 프론트엔드 개발 문화 선도
• 당근마켓: React Native 활용 사례
• 네이버: React 기반 서비스 운영
• 카카오: React 개발 도구 및 라이브러리

콘텐츠 업데이트 요청은 요청 게시판에 써주세요