728x90
개요
- 리액트는 2012년에 배포된 이후, 2025년 현재 가장 인기 있는 UI 개발 라이브러리로 자리 잡았다.
- 10년 이상 오랜 기간 동안 사용되면서 React만의 라이브러리 생태계가 형성되었다.
- 이번 포스팅에서는 2025년 대규모 애플리케이션 개발에 필수적인 리액트 라이브러리를 알아보고자 한다.
React 라이브러리
React 프로젝트 시작하기
- Vite : React 프로젝트를 설정하는 가장 인기 있는 도구. 빠른 빌드 속도와 간편한 TypeScript 지원 제공
- Next.js :
- React 기반 메타 프레임워크로 서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원
- 파일 기반 라우팅, API 라우트, 캐싱, React Server Components(RSC) 등 다양한 기능 제공
- 서버 컴포넌트 및 서버 함수와 같은 최신 리액트 기능을 통해 백엔드와의 연결을 지원함
- TanStack Start (Beta) : React 기반의 새로운 프레임워크로, React Server Components 지원 예정. Next.js의 대안으로 개발 중
- React Router : React의 클라이언트 사이드 라우팅을 위한 대표적인 라이브러리. 현재 Remix의 영향을 받아 변화 중
- Astro
- 프레임워크에 구애받지 않는 정적 사이트 생성 도구. React와 함께 사용할 수 있으며, 불필요한 JavaScript를 최소화하여 성능 최적화 가능
- 제품의 랜딩 페이지를 생성하기 위한 선택적 도구로, 빠른 랜딩 페이지 제작과 개발자 경험 향상을 위해 사용됨
- Nitro , Redwood , Waku
- React의 새로운 프레임워크 및 툴링
- Waku는 Zustand 개발자가 만든 React Server Components 지원 라이브러리
- 추천:
- 클라이언트 사이드 렌더링(CSR): Vite
- 서버 사이드 렌더링(SSR): Next.js
- 정적 사이트 생성(SSG): Astro
React 패키지 매니저
- npm : Node.js 기본 패키지 매니저이자 가장 널리 사용됨
- Yarn : 더 나은 의존성 관리 및 속도 개선 제공
- pnpm : 성능이 뛰어나지만 상대적으로 덜 보편적
- Turborepo : Monorepo(모노레포) 관리 도구로, 여러 React 프로젝트를 효과적으로 관리 가능
- 추천:
- 일반적인 패키지 관리: npm
- 성능 최적화 필요 시: pnpm
- 모노레포 필요 시: Turborepo
React 상태 관리
- useState, useReducer : React 기본 내장 훅으로 컴포넌트 내 상태 관리
- useContext : 전역 상태 관리를 위한 React 기본 내장 훅
- Zustand :
- 간단한 API로 전역 상태를 관리할 수 있는 라이브러리. Redux보다 사용이 간편하여 최근 많은 개발자들이 선호
- 클라이언트 측 상태 관리 도구로 활용되어, URL 상태 관리, 클라이언트 데이터 캐싱 등 서버 주도 React 애플리케이션에서의 사용 빈도가 감소하고 있습니다.
- 그러나 여전히 legacy 시장에서는 높은 점유율을 유지하고 있습니다.
- Redux : 오랜 기간 사용된 상태 관리 라이브러리. 최근에는 Redux Toolkit이 표준으로 자리 잡음
- XState, Zag : 상태 머신 기반 상태 관리 라이브러리
- Mobx , Jotai , Nano Stores : Zustand, Redux 대안으로 사용 가능한 상태 관리 라이브러리
- 추천:
- 로컬 상태: useState / useReducer
- 작은 전역 상태: useContext
- 큰 전역 상태: Zustand
React 데이터 패칭
- TanStack Query
- REST 및 GraphQL API 요청을 위한 데이터 패칭 라이브러리. 캐싱, 동기화, 옵티미스틱 업데이트 등의 기능 제공
- 무한 스크롤 등 복잡한 클라이언트 측 데이터 페칭에 사용되는 선택적 도구로, 프로젝트 복잡도가 낮을 경우 서버 컴포넌트만으로도 충분함
- Apollo Client : GraphQL API에 최적화된 데이터 관리 라이브러리
- urql : 경량 GraphQL 클라이언트
- Relay : Facebook이 개발한 고성능 GraphQL 클라이언트
- RTK Query : Redux 환경에서 데이터 패칭을 쉽게 할 수 있도록 돕는 도구
- tRPC : TypeScript 기반의 백엔드-프론트엔드 간 타입 안전 API 통신을 제공. TanStack Query와 함께 사용 가능
- 추천:
- 서버 사이드 데이터 패칭: React Server Components / Functions (지원되는 메타 프레임워크 사용 시)
- 클라이언트 사이드 데이터 패칭: TanStack Query (REST, GraphQL)
- GraphQL 전용: Apollo Client
- 타입 안전한 API 통신: tRPC
React 라우터
- React Router : 클라이언트 사이드 라우팅을 위한 가장 널리 사용되는 라이브러리
- TanStack Router (Beta) : TypeScript 지원이 뛰어난 새로운 라우팅 라이브러리
- 추천:
- 서버 사이드 라우팅: Next.js
- 클라이언트 사이드 라우팅: React Router (가장 많이 사용됨), TanStack Router (최신 트렌드)
React 스타일링(CSS)
- Tailwind CSS
- Utility-First-CSS 방식으로, 미리 정의된 클래스를 활용해 빠르게 스타일링 가능
- 디자인 시스템을 일관되게 유지할 수 있지만, 클래스 네이밍이 복잡해질 수 있음
- 빠른 제품 개발과 장기적인 CSS 유지보수를 위해 추천되는 도구
- CSS Modules
- 컴포넌트별로 스타일을 모듈화하여 전역 스타일 충돌 방지 가능
- CSS-in-CSS 접근법 중 가장 널리 사용됨
- styled-components
- JavaScript 코드 내에서 CSS를 정의하는 CSS-in-JS 방식
- 성능 및 서버 사이드 환경에서의 문제로 최근 인기가 줄어드는 추세
- Emotion : styled-components와 유사한 CSS-in-JS 라이브러리로, 성능 최적화 및 유틸리티 클래스 활용 가능
- clsx : 조건부 className 설정을 쉽게 해주는 유틸리티 라이브러리
- StyleX : Facebook이 개발한 새로운 CSS-in-JS 솔루션. 최적화된 컴파일 방식으로 유틸리티-퍼스트 스타일링 제공
- 기타 CSS 라이브러리 : PandaCSS , linaria , vanilla-extract , nanocss , UnoCSS , Styled JSX
- 추천:
- 가장 인기 있는 방식: Tailwind CSS
- 스타일 모듈화 필요 시: CSS Modules
- 최신 CSS-in-JS 솔루션: StyleX
React UI 라이브러리
- Material UI (MUI) : 프리랜서 프로젝트에서 여전히 많이 사용되는 UI 라이브러리. Google의 Material Design 시스템 기반
- Mantine UI : 2022년 가장 인기 있었던 UI 라이브러리. 다양한 기능과 커스텀 스타일 지원
- Chakra UI : 2021년 가장 인기 있었던 UI 라이브러리. 접근성과 스타일링 편의성이 뛰어남
- Hero UI : 이전 Next UI에서 변경된 UI 라이브러리
- Park UI : Ark UI 기반 UI 라이브러리
- PrimeReact : 다양한 프리빌트(Prebuilt) UI 컴포넌트 제공
- 헤드리스 UI 라이브러리
- shadcn/ui (2023-2024년 가장 인기 있음)
- Tailwind CSS와 원활하게 통합되는 UI 라이브러리로, 버전이 없는 시스템을 제공하여 UI 관리에 신선한 접근 방식을 제시함
- Radix (shadcn/ui의 기반)
- React Aria
- Ark UI (Chakra UI 제작팀 개발)
- Ariakit
- Daisy UI
- Headless UI
- Tailwind UI (유료)
- shadcn/ui (2023-2024년 가장 인기 있음)
- 사용 빈도가 줄어든 UI 라이브러리
- 추천:
- 스타일 포함 UI 라이브러리: MUI, Mantine, Chakra UI
- 스타일 미포함 헤드리스 UI 라이브러리: shadcn/ui, Radix
React 애니메이션
- Motion : 가장 추천되는 애니메이션 라이브러리 (구 Framer Motion)
- react-spring : 물리 기반 애니메이션 구현 가능
React 데이터 시각화 & 차트
- D3.js : 저수준 차트 라이브러리로 강력하지만 학습 곡선이 가파름
- Recharts : 사용하기 쉬운 차트 라이브러리. 기본적인 커스터마이징 가능
- visx : D3와 유사한 방식으로 동작하지만 React 친화적
- 기타 차트 라이브러리 : Victory , nivo , react-chartjs
- 추천:
- 간편한 차트: Recharts
- D3 스타일 커스터마이징: visx
React 폼
- React Hook Form : 가장 널리 사용되는 React 폼 라이브러리. zod과 함께 사용하여 강력한 폼 검증 가능
- Conform : 풀스택 애플리케이션과의 통합이 용이한 신흥 폼 라이브러리
- Formik , React Final Form : 전통적인 React 폼 라이브러리로, 여전히 일부 프로젝트에서 사용됨
- 추천:
- 폼 라이브러리 선택 시 React Hook Form + zod 사용
React 타입 검사
- TypeScript: 자바스크립트 프로젝트의 산업 표준으로, 개발자 경험 향상, 버그 감소, 코드 유지보수성 향상에 기여함
- Zod: TypeScript와 잘 맞는 스키마 선언 및 검증 라이브러리로, 주로 서버 측 검증에 사용되며, 클라이언트 측 폼은 네이티브 HTML 검증을 활용하여 복잡성을 줄임
- nuqs: Next.js에서 URL 상태(예: 검색, 정렬, 페이지네이션)를 타입 안전하게 관리하기 위한 도구로, 다른 프레임워크에서는 내장 기능이나 다른 라이브러리를 사용할 수 있음
React 코드 스타일 및 포맷팅
- ESLint : 코드 스타일 유지를 위한 린터. 인기 있는 스타일 가이드를 적용할 수 있음
- Prettier : 일관된 코드 포맷팅을 제공하는 도구. ESLint와 함께 사용 가능
- Biome : Rust 기반의 빠른 올인원 린터 및 코드 포맷터 (구 Rome). ESLint 및 Prettier의 대안으로 주목받는 중
- 추천:
- ESLint + Prettier 조합 사용
- 새로운 대안으로 Biome 고려
React 인증(Authentication)
- Lucia : OAuth 및 암호화 기능을 지원하는 인증 솔루션, 더 이상 유지보수되지 않지만, Oslo, Argon2, Arctic 등을 활용한 인증 시스템 구축 학습 자료로 사용되어, 서드파티 솔루션에 의존하지 않는 맞춤형 인증 시스템을 구현할 수 있음
- Better Auth : 최신 인증 서비스 중 하나
- Auth.js : Next.js 및 다양한 프레임워크에서 쉽게 사용할 수 있는 인증 라이브러리
- 유료 인증 서비스 : Clerk , Kinde
- Firebase/Supabase 기반 인증 : Supabase Auth
- 기타 인증 서비스 : AuthKit , Auth0 , AWS Cognito
- 추천:
- 손쉬운 인증: Auth.js, Supabase Auth
- OAuth 및 보안 기능 강화: Lucia, Better Auth
React 백엔드
- Next.js : 서버사이드 렌더링(SSR) 및 API 라우트 제공
- Astro : 정적 웹사이트 생성에 적합한 프레임워크
- tRPC : 타입 안전한 API 통신을 위한 솔루션
- Hono : 초경량 서버 프레임워크로, React와 함께 사용 가능
- 전통적인 Node.js 백엔드 프레임워크
- Inngest : 백엔드에서 복잡한 작업 조율을 위해 사용되는 도구로, 시간에 민감하지 않은 백그라운드 작업에 적합하며, 설정과 유지보수가 용이한 큐 시스템을 제공함
- 기타 백엔드 프레임워크
- 추천:
- 풀스택 React 개발: Next.js, tRPC
- 전통적인 백엔드 필요 시: Express, Fastify
React 데이터베이스 및 ORM
- Prisma : 가장 인기 있는 TypeScript 기반으로 안정적이다, 현재는 Prisma를 선호함
- Drizzle ORM : Prisma의 대안으로 주목받는 최신 트렌드 ORM
- 기타 ORM 및 쿼리 빌더 : Kysely , database-js : PlanetScale 전용
- 서버리스 데이터베이스
- PlanetScale (유료)
- Neon PostgreSQL 서버리스
- Xata
- Turso
- Firebase/Supabase 기반 데이터베이스
- Supabase : Postgres 데이터베이스를 제공하는 서비스로 자체 호스팅 가능, 유연성을 위해 데이터베이스만 사용하고 Prisma로 연결하여 다른 데이터베이스로의 교체를 용이하게 함
- Firebase Firestore
- 추천:
- ORM 필요 시: Prisma, Drizzle ORM
- 서버리스 데이터베이스: PlanetScale, Neon
React 호스팅
- 자체 관리형 서버 : Digital Ocean , Hetzner
- 완전 관리형 호스팅 :
- 기타 호스팅 플랫폼
- Render , Fly.io , Railway
- CloudFlare : 다양한 도메인 관리 경험 후, 현재는 CloudFlare의 우수한 UI와 DNS 레코드에 추가 정보를 첨부할 수 있는 기능 제공
- AWS , Azure , Google Cloud
- 추천:
- Next.js 프로젝트: Vercel
- 자체 서버 관리 필요 시: Digital Ocean, Hetzner, Coolify 추천
React 테스트
- Vitest : Jest보다 빠르고 최신 React 프로젝트에 최적화된 테스트 프레임워크. 테스트 실행, 어서션, 목(mocking) 기능 제공
- Jest : 오래된 프로젝트에서도 많이 사용되는 테스트 프레임워크
- React Testing Library (RTL)
- React 컴포넌트 테스트를 위한 대표적인 라이브러리
- HTML 요소 렌더링 및 이벤트 시뮬레이션 기능 제공
- Playwright
- 가장 추천되는 E2E(End-to-End) 테스트 도구
- 다양한 브라우저 및 디바이스 환경에서 자동화 테스트 가능
- Cypress : 프론트엔드 E2E 테스트 도구로, Playwright와 경쟁 중
- 추천:
- 유닛/통합 테스트: Vitest + React Testing Library
- E2E 테스트: Playwright (또는 Cypress)
- 스냅샷 테스트 옵션: Vitest
- React Testing Library + Cypress/Playwright의 조합 추천
React와 불변 데이터 구조
- Immer :
- 불변 데이터 구조를 쉽게 다룰 수 있도록 돕는 라이브러리
- 복잡한 상태 변경 로직을 간결하게 구현 가능
React 국제화 / 다국어(i18n) 지원
- FormatJS : 날짜, 숫자, 통화 등의 포맷팅 포함한 강력한 i18n 라이브러리
- react-i18next : React에서 가장 널리 사용되는 다국어 지원 라이브러리
- Lingui : 최소한의 설정으로 강력한 다국어 지원 제공
- next-intl : Next.js 프로젝트를 위한 다국어 라이브러리
- 추천:
- 가장 보편적인 선택: react-i18next
- Next.js 기반 프로젝트: next-intl
React 텍스트 에디터
- TipTap : 확장성이 뛰어난 최신 리치 텍스트 에디터
- Plate : Slate.js 기반의 강력한 에디터 솔루션
- Lexical : Facebook이 만든 경량 리치 텍스트 에디터
- Slate : 커스텀 가능한 리치 텍스트 에디터 프레임워크
- 추천:
- 유연한 확장성 필요 시: TipTap
- 경량 & 최적화된 에디터: Lexical
React 결제 시스템
- PayPal : 가장 널리 사용되는 결제 시스템 중 하나
- Stripe : 개발 친화적인 결제 API 제공, 훌륭한 문서와 API를 제공하지만, 기능과 API 범위가 확대되어 복잡할 수 있다.
- 기타 결제 솔루션
- Braintree (PayPal 소유)
- Lemon Squeezy (Stripe 기반)
- 추천:
- 간편한 결제 솔루션: Stripe
- PayPal 지원 필요 시: PayPal 또는 Braintree
React 시간 및 날짜 처리
- date-fns : 가벼우면서도 다양한 날짜/시간 함수 제공
- Day.js : Moment.js의 가벼운 대안으로, API가 유사함
- 추천:
- 가장 가벼운 라이브러리: Day.js
- 기능이 풍부한 라이브러리: date-fns
React 크로스플랫폼
- Electron :
- 크로스 플랫폼 데스크톱 애플리케이션 개발 프레임워크
- 웹 기술(HTML, CSS, JS)로 Windows, macOS, Linux 애플리케이션 제작 가능
- Tauri
- Electron보다 가벼운 대안으로 Rust 기반 백엔드 사용
- 보안성과 성능이 중요한 프로젝트에 적합
- 추천:
- 웹 기술을 그대로 활용: Electron
- 경량 & 보안 우선: Tauri
React 파일업로드
- react-dropzone : 파일 업로드를 위한 React 훅 기반 라이브러리. 드래그 앤 드롭 기능 지원
- S3 : AWS S3, 프리사인드 URL, AWS IAM을 활용하여 유연하고 저렴한 파일 저장 솔루션을 구축할 수 있으며, 대부분의 서드파티 서비스도 동일한 API를 사용하므로 필요 시 제공자를 변경하기 용이함
React 이메일 렌더링
- react-email (추천) : React 컴포넌트를 활용한 반응형 HTML 이메일 템플릿 제작 가능
- mjml : HTML 이메일을 간편하게 생성하는 마크업 언어
- Mailing : 개발자가 쉽게 이메일을 생성하고 관리할 수 있도록 지원
- jsx-email : JSX 문법을 활용한 이메일 템플릿 제작 가능
- 이메일 서비스 제공업체 :
- 추천:
- React 스타일로 이메일 제작: react-email
- 이메일 서비스 필요 시: SendGrid, Mailgun
- 이전엔 Postmark + Resend조합에서 React Email + Resend 을 많이 사용한다.
React 드래그 앤 드롭
- @hello-pangea/dnd : react-beautiful-dnd의 후속 프로젝트로 간편한 사용법 제공
- dnd kit : 높은 유연성과 커스터마이징 가능하지만 학습 곡선이 있음
- 추천:
- 쉬운 드래그 앤 드롭: @hello-pangea/dnd
- 커스터마이징 필요 시: dnd kit
React 모바일 개발
- React Native : React 기반의 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크
- Expo : React Native 개발을 더욱 쉽게 만들어주는 툴체인
- Tamagui : 웹과 모바일에서 동일한 UI 컴포넌트를 사용할 수 있도록 지원
- 추천:
- 모바일 개발: React Native + Expo
- 웹과 모바일 UI 통합: Tamagui
React VR/AR 개발
- react-three-fiber : Three.js 기반 3D 렌더링 라이브러리. VR 지원 사례 존재
- react-360 (아카이브됨) : 페이스북이 개발한 VR/AR 프레임워크 (현재 유지보수 중단)
- aframe-react (더 이상 유지보수 안됨) : A-Frame을 React에서 사용할 수 있도록 지원하는 라이브러리
- 추천:
- 최신 React 3D/VR 라이브러리: react-three-fiber
React 디자인 프로토타이핑
- Figma : UI/UX 디자인 및 프로토타이핑을 위한 가장 인기 있는 툴
- Excalidraw : 손으로 그린 듯한 와이어프레임 및 다이어그램 제작 가능
- tldraw : Excalidraw과 유사한 스케치 도구
- 추천:
- UI/UX 디자인: Figma
- 간단한 와이어프레임: Excalidraw
React 컴포넌트 문서화
- Storybook : UI 컴포넌트 개발 및 문서화를 위한 대표적인 툴
- Docusaurus : 기술 문서를 위한 정적 사이트 생성기
- Styleguidist : React 컴포넌트 중심의 스타일 가이드 문서화 툴
- React Cosmos : UI 컴포넌트를 독립적으로 개발 및 테스트할 수 있는 환경 제공
- 추천:
- 컴포넌트 문서화: Storybook
- 기술 문서 생성: Docusaurus
출처
728x90
