# 2025년을 위한 필수 React 라이브러리들 > Clean Markdown view of GeekNews topic #19556. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=19556](https://news.hada.io/topic?id=19556) - GeekNews Markdown: [https://news.hada.io/topic/19556.md](https://news.hada.io/topic/19556.md) - Type: news - Author: [xguru](https://news.hada.io/@xguru) - Published: 2025-03-04T10:03:01+09:00 - Updated: 2025-03-04T10:03:01+09:00 - Original source: [robinwieruch.de](https://www.robinwieruch.de/react-libraries/) - Points: 52 - Comments: 6 ## Summary 리액트는 컴포넌트 기반 UI 구축을 중심으로 하는 방대한 라이브러리 생태계를 가지고 있어서 뭘 선택해야 할지 어렵습니다. 이 글에선 React 프로젝트를 시작하기, 패지키 매니저, 상태관리, 데이터 페칭, 라우팅, CSS 스타일링, React UI 라이브러리, 애니메이션 라이브러리, Form, 인증, React 백엔드들, 데이터베이스와 ORM, 호스팅 서비스, 테스트 라이브러리, 다국어 지원, 리치 텍스트 에디터, 결제 시스템, 시간 및 날짜 처리, 데스크톱 앱 개발 도구, 파일 업로드, 이메일 렌더링, 드래그 앤 드롭, 모바일 개발, VR/AR, 프로토타이핑, 컴포넌트 문서화 도구까지 폭넓게 설명하고 추천합니다. ## Topic Body - 리액트는 오랜 기간 사용되면서 **방대한 라이브러리 생태계**가 형성됨 - 다른 언어/프레임워크에서 온 개발자들은 **리액트 애플리케이션을 구축하는 데 필요한 라이브러리 선택에 어려움**을 겪을 수 있음 - **리액트의 핵심**은 **컴포넌트 기반 UI**를 구축하는 기능 중심의 라이브러리 - **함수형 컴포넌트**와 **리액트 훅(React Hooks)** 을 활용해 로컬 상태 관리, 부수 효과 처리, 성능 최적화 가능 - 궁극적으로 컴포넌트와 후크 모두 **함수를 활용하여 UI를 구성하는 방식**으로 작동함 - 2025년을 위한 **대규모 애플리케이션을 개발하는 데 필요한 필수 리액트 라이브러리**를 소개함 ### React 프로젝트 시작하기 - **[Vite](https://vitejs.dev/)** : React 프로젝트를 설정하는 가장 인기 있는 도구. 빠른 빌드 속도와 간편한 TypeScript 지원 제공 - **[Next.js](https://nextjs.org/)** : - React 기반 메타 프레임워크로 서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원 - 파일 기반 라우팅, API 라우트, React Server Components(RSC) 등 다양한 기능 제공 - **[TanStack Start](https://tanstack.com/start) (Beta)** : React 기반의 새로운 프레임워크로, React Server Components 지원 예정. Next.js의 대안으로 개발 중 - **[React Router](https://reactrouter.com/)** : React의 클라이언트 사이드 라우팅을 위한 대표적인 라이브러리. 현재 Remix의 영향을 받아 변화 중 - **[Astro](https://astro.build/)** : 프레임워크에 구애받지 않는 정적 사이트 생성 도구. React와 함께 사용할 수 있으며, 불필요한 JavaScript를 최소화하여 성능 최적화 가능 - **[Nitro](https://nitro.unjs.io/)** , **[Redwood](https://redwoodjs.com/)** , **[Waku](https://github.com/dai-shi/waku)** - React의 새로운 프레임워크 및 툴링 - Waku는 Zustand 개발자가 만든 React Server Components 지원 라이브러리 - **추천:** - 클라이언트 사이드 렌더링(CSR): Vite - 서버 사이드 렌더링(SSR): Next.js - 정적 사이트 생성(SSG): Astro ### React 패키지 매니저 - **[npm](https://www.npmjs.com/)** : Node.js 기본 패키지 매니저이자 가장 널리 사용됨 - **[Yarn](https://yarnpkg.com/)** : 더 나은 의존성 관리 및 속도 개선 제공 - **[pnpm](https://pnpm.io/)** : 성능이 뛰어나지만 상대적으로 덜 보편적 - **[Turborepo](https://turborepo.org/)** : Monorepo(모노레포) 관리 도구로, 여러 React 프로젝트를 효과적으로 관리 가능 - **추천:** - 일반적인 패키지 관리: npm - 성능 최적화 필요 시: pnpm - 모노레포 필요 시: Turborepo ### React 상태 관리 - **[useState](https://www.robinwieruch.de/react-usestate-hook), [useReducer](https://www.robinwieruch.de/react-usereducer-hook/)** : React 기본 내장 훅으로 컴포넌트 내 상태 관리 - **[useContext](https://www.robinwieruch.de/react-usecontext-hook/)** : 전역 상태 관리를 위한 React 기본 내장 훅 - **[Zustand](https://github.com/pmndrs/zustand)** : 간단한 API로 전역 상태를 관리할 수 있는 라이브러리. Redux보다 사용이 간편하여 최근 많은 개발자들이 선호 - **[Redux](https://redux-toolkit.js.org/)** : 오랜 기간 사용된 상태 관리 라이브러리. 최근에는 Redux Toolkit이 표준으로 자리 잡음 - **[XState](https://github.com/statelyai/xstate), [Zag](https://github.com/chakra-ui/zag)** : 상태 머신 기반 상태 관리 라이브러리 - **[Mobx](https://github.com/mobxjs/mobx)** , **[Jotai](https://github.com/pmndrs/jotai)** , **[Nano Stores](https://github.com/nanostores/nanostores)** : Zustand, Redux 대안으로 사용 가능한 상태 관리 라이브러리 - **추천:** - 로컬 상태: useState / useReducer - 작은 전역 상태: useContext - 큰 전역 상태: Zustand ### React 데이터 패칭 - **[TanStack Query](https://tanstack.com/query)** : REST 및 GraphQL API 요청을 위한 데이터 패칭 라이브러리. 캐싱, 동기화, 옵티미스틱 업데이트 등의 기능 제공 - **[Apollo Client](https://www.apollographql.com/docs/react/)** : GraphQL API에 최적화된 데이터 관리 라이브러리 - **[urql](https://formidable.com/open-source/urql/)** : 경량 GraphQL 클라이언트 - **[Relay](https://github.com/facebook/relay)** : Facebook이 개발한 고성능 GraphQL 클라이언트 - **[RTK Query](https://redux-toolkit.js.org/rtk-query/overview)** : Redux 환경에서 데이터 패칭을 쉽게 할 수 있도록 돕는 도구 - **[tRPC](https://trpc.io/)** : TypeScript 기반의 백엔드-프론트엔드 간 타입 안전 API 통신을 제공. TanStack Query와 함께 사용 가능 - **추천:** - 서버 사이드 데이터 패칭: React Server Components / Functions (지원되는 메타 프레임워크 사용 시) - 클라이언트 사이드 데이터 패칭: TanStack Query (REST, GraphQL) - GraphQL 전용: Apollo Client - 타입 안전한 API 통신: tRPC ### React 라우팅 - **[React Router](https://reactrouter.com/)** : 클라이언트 사이드 라우팅을 위한 가장 널리 사용되는 라이브러리 - **[TanStack Router](https://tanstack.com/router) (Beta)** : TypeScript 지원이 뛰어난 새로운 라우팅 라이브러리 - **추천:** - 서버 사이드 라우팅: Next.js - 클라이언트 사이드 라우팅: React Router (가장 많이 사용됨), TanStack Router (최신 트렌드) ### React의 CSS 스타일링 - **[Tailwind CSS](https://tailwindcss.com/)** - Utility-First-CSS 방식으로, 미리 정의된 클래스를 활용해 빠르게 스타일링 가능 - 디자인 시스템을 일관되게 유지할 수 있지만, 클래스 네이밍이 복잡해질 수 있음 - **[CSS Modules](https://github.com/css-modules/css-modules)** - 컴포넌트별로 스타일을 모듈화하여 전역 스타일 충돌 방지 가능 - CSS-in-CSS 접근법 중 가장 널리 사용됨 - **[styled-components](https://www.robinwieruch.de/react-styled-components/)** - JavaScript 코드 내에서 CSS를 정의하는 CSS-in-JS 방식 - 성능 및 서버 사이드 환경에서의 문제로 최근 인기가 줄어드는 추세 - **[Emotion](https://emotion.sh/)** : styled-components와 유사한 CSS-in-JS 라이브러리로, 성능 최적화 및 유틸리티 클래스 활용 가능 - **[clsx](https://github.com/lukeed/clsx)** : 조건부 `className` 설정을 쉽게 해주는 유틸리티 라이브러리 - **[StyleX](https://stylexjs.com/)** : Facebook이 개발한 새로운 CSS-in-JS 솔루션. 최적화된 컴파일 방식으로 유틸리티-퍼스트 스타일링 제공 - 기타 CSS 라이브러리 : **[PandaCSS](https://panda-css.com/)** , **[linaria](https://linaria.dev/)** , **[vanilla-extract](https://vanilla-extract.style/)** , **[nanocss](https://github.com/javascripter/nanocss)** , **[UnoCSS](https://unocss.dev/)** , **[Styled JSX](https://github.com/vercel/styled-jsx)** - **추천:** - 가장 인기 있는 방식: Tailwind CSS - 스타일 모듈화 필요 시: CSS Modules - 최신 CSS-in-JS 솔루션: StyleX ### React UI 라이브러리 - **[Material UI (MUI)](https://material-ui.com/)** : 프리랜서 프로젝트에서 여전히 많이 사용되는 UI 라이브러리. Google의 Material Design 시스템 기반 - **[Mantine UI](https://mantine.dev/)** : 2022년 가장 인기 있었던 UI 라이브러리. 다양한 기능과 커스텀 스타일 지원 - **[Chakra UI](https://chakra-ui.com/)** : 2021년 가장 인기 있었던 UI 라이브러리. 접근성과 스타일링 편의성이 뛰어남 - **[Hero UI](https://www.heroui.com/)** : 이전 Next UI에서 변경된 UI 라이브러리 - **[Park UI](https://park-ui.com/)** : Ark UI 기반 UI 라이브러리 - **[PrimeReact](https://primereact.org/)** : 다양한 프리빌트(Prebuilt) UI 컴포넌트 제공 - 헤드리스 UI 라이브러리 - **[shadcn/ui](https://ui.shadcn.com/) (2023-2024년 가장 인기 있음)** - **[Radix](https://www.radix-ui.com/) (shadcn/ui의 기반)** - **[React Aria](https://react-spectrum.adobe.com/react-aria/)** - **[Ark UI](https://ark-ui.com/) (Chakra UI 제작팀 개발)** - **[Ariakit](https://ariakit.org/)** - **[Daisy UI](https://daisyui.com/)** - **[Headless UI](https://headlessui.com/)** - **[Tailwind UI](https://www.tailwindui.com/) (유료)** - 사용 빈도가 줄어든 UI 라이브러리 - **[Ant Design](https://ant.design/)** - **[Semantic UI](https://react.semantic-ui.com/)** - **[React Bootstrap](https://react-bootstrap.github.io/)** - **[Reactstrap](https://reactstrap.github.io/?path=/story/home-installation--page)** - **추천:** - 스타일 포함 UI 라이브러리: MUI, Mantine, Chakra UI - 스타일 미포함 헤드리스 UI 라이브러리: shadcn/ui, Radix ### React 애니메이션 라이브러리 - **[Motion](https://motion.dev/)** : 가장 추천되는 애니메이션 라이브러리 (구 Framer Motion) - **[react-spring](https://www.react-spring.dev/)** : 물리 기반 애니메이션 구현 가능 ### React 차트 및 데이터 시각화 - **[D3.js](https://d3js.org/)** : 저수준 차트 라이브러리로 강력하지만 학습 곡선이 가파름 - **[Recharts](http://recharts.org/)** : 사용하기 쉬운 차트 라이브러리. 기본적인 커스터마이징 가능 - **[visx](https://github.com/airbnb/visx)** : D3와 유사한 방식으로 동작하지만 React 친화적 - 기타 차트 라이브러리 : **[Victory](https://formidable.com/open-source/victory/)** , **[nivo](https://nivo.rocks/)** , **[react-chartjs](https://github.com/reactchartjs/react-chartjs-2)** - **추천:** - 간편한 차트: Recharts - D3 스타일 커스터마이징: visx ### React 폼 라이브러리 - **[React Hook Form](https://react-hook-form.com/)** : 가장 널리 사용되는 React 폼 라이브러리. `zod`과 함께 사용하여 강력한 폼 검증 가능 - **[Conform](https://conform.guide/)** : 풀스택 애플리케이션과의 통합이 용이한 신흥 폼 라이브러리 - **[Formik](https://github.com/jaredpalmer/formik)** , **[React Final Form](https://final-form.org/react)** : 전통적인 React 폼 라이브러리로, 여전히 일부 프로젝트에서 사용됨 - **추천:** - 폼 라이브러리 선택 시 React Hook Form + zod 사용 ### React 코드 스타일 및 포맷팅 - **[ESLint](https://eslint.org/)** : 코드 스타일 유지를 위한 린터. 인기 있는 스타일 가이드를 적용할 수 있음 - **[Prettier](https://github.com/prettier/prettier)** : 일관된 코드 포맷팅을 제공하는 도구. ESLint와 함께 사용 가능 - **[Biome](https://biomejs.dev/)** : Rust 기반의 빠른 올인원 린터 및 코드 포맷터 (구 Rome). ESLint 및 Prettier의 대안으로 주목받는 중 - **추천:** - ESLint + Prettier 조합 사용 - 새로운 대안으로 Biome 고려 ### React 인증(Authentication) - **[Lucia](https://lucia-auth.com/)** : OAuth 및 암호화 기능을 지원하는 인증 솔루션 - **[Better Auth](https://www.better-auth.com/)** : 최신 인증 서비스 중 하나 - **[Auth.js](https://authjs.dev/)** : Next.js 및 다양한 프레임워크에서 쉽게 사용할 수 있는 인증 라이브러리 - 유료 인증 서비스 : **[Clerk](https://clerk.com/)** , **[Kinde](https://kinde.com/)** - Firebase/Supabase 기반 인증 : **[Supabase Auth](https://supabase.com/docs/guides/auth/overview)** - 기타 인증 서비스 : **[AuthKit](https://www.authkit.com/)** , **[Auth0](https://auth0.com/)** , **[AWS Cognito](https://aws.amazon.com/cognito/)** - **추천:** - 손쉬운 인증: Auth.js, Supabase Auth - OAuth 및 보안 기능 강화: Lucia, Better Auth ### React 백엔드 - **[Next.js](https://nextjs.org/)** : 서버사이드 렌더링(SSR) 및 API 라우트 제공 - **[Astro](https://astro.build/)** : 정적 웹사이트 생성에 적합한 프레임워크 - **[tRPC](https://trpc.io/)** : 타입 안전한 API 통신을 위한 솔루션 - **[Hono](https://hono.dev/)** : 초경량 서버 프레임워크로, React와 함께 사용 가능 - 전통적인 Node.js 백엔드 프레임워크 - **[Express](https://expressjs.com/)** : 가장 인기 있는 Node.js 백엔드 프레임워크 - **[Fastify](https://fastify.dev/)** : 고성능 Node.js 프레임워크 - **[NestJS](https://nestjs.com/)** : 대규모 애플리케이션에 적합 - **[Elysia](https://elysiajs.com/)** : 최신 TypeScript 기반 백엔드 - 기타 백엔드 프레임워크 - **[Koa](https://koajs.com/)** - **[Hapi](https://hapi.dev/)** - **추천:** - 풀스택 React 개발: Next.js, tRPC - 전통적인 백엔드 필요 시: Express, Fastify ### React 데이터베이스 및 ORM - **[Prisma](https://www.prisma.io/)** : 가장 인기 있는 TypeScript 기반 ORM - **[Drizzle ORM](https://orm.drizzle.team/)** : Prisma의 대안으로 주목받는 ORM - 기타 ORM 및 쿼리 빌더 : **[Kysely](https://kysely.dev/)** , **[database-js](https://github.com/planetscale/database-js)** : PlanetScale 전용 - 서버리스 데이터베이스 - **[PlanetScale](https://planetscale.com/)** (유료) - **[Neon](https://neon.tech/)** PostgreSQL 서버리스 - **[Xata](https://xata.io/)** - **[Turso](https://turso.tech/)** - Firebase/Supabase 기반 데이터베이스 - **[Supabase](https://supabase.com/)** PostgreSQL 기반, 자체 호스팅 가능 - **[Firebase Firestore](https://firebase.google.com/docs/firestore)** - **추천:** - ORM 필요 시: Prisma, Drizzle ORM - 서버리스 데이터베이스: PlanetScale, Neon ### React 호스팅 - 자체 관리형 서버 : **[Digital Ocean](https://m.do.co/c/fb27c90322f3/)** , **[Hetzner](https://www.hetzner.com/)** - 완전 관리형 호스팅 : - **[Vercel](https://vercel.com/)** : Next.js 프로젝트에 최적화 - **[Coolify](https://coolify.io/)** : 중간 단계 솔루션 - 기타 호스팅 플랫폼 - **[Render](https://render.com/)** , **[Fly.io](https://fly.io/)** , **[Railway](https://railway.app/)** - **[CloudFlare](https://www.cloudflare.com/)** , **[AWS](https://aws.amazon.com/)** , **[Azure](https://azure.microsoft.com/)** , **[Google Cloud](https://cloud.google.com/)** - **추천:** - Next.js 프로젝트: Vercel - 자체 서버 관리 필요 시: Digital Ocean, Hetzner ### React 테스트 라이브러리 - **[Vitest](https://vitest.dev/)** : Jest보다 빠르고 최신 React 프로젝트에 최적화된 테스트 프레임워크. 테스트 실행, 어서션, 목(mocking) 기능 제공 - **[Jest](https://github.com/facebook/jest)** : 오래된 프로젝트에서도 많이 사용되는 테스트 프레임워크 - **[React Testing Library (RTL)](https://www.robinwieruch.de/react-testing-library/)** - React 컴포넌트 테스트를 위한 대표적인 라이브러리 - HTML 요소 렌더링 및 이벤트 시뮬레이션 기능 제공 - **[Playwright](https://playwright.dev/)** - 가장 추천되는 E2E(End-to-End) 테스트 도구 - 다양한 브라우저 및 디바이스 환경에서 자동화 테스트 가능 - **[Cypress](https://www.robinwieruch.de/react-testing-cypress/)** : 프론트엔드 E2E 테스트 도구로, Playwright와 경쟁 중 - **추천:** - 유닛/통합 테스트: Vitest + React Testing Library - E2E 테스트: Playwright (또는 Cypress) - 스냅샷 테스트 옵션: Vitest ### React와 불변 데이터 구조 - **[Immer](https://github.com/immerjs/immer)** : - 불변 데이터 구조를 쉽게 다룰 수 있도록 돕는 라이브러리 - 복잡한 상태 변경 로직을 간결하게 구현 가능 ### React 다국어(i18n) 지원 - **[FormatJS](https://github.com/formatjs/formatjs)** : 날짜, 숫자, 통화 등의 포맷팅 포함한 강력한 i18n 라이브러리 - **[react-i18next](https://github.com/i18next/react-i18next)** : React에서 가장 널리 사용되는 다국어 지원 라이브러리 - **[Lingui](https://lingui.dev/)** : 최소한의 설정으로 강력한 다국어 지원 제공 - **[next-intl](https://next-intl.dev/)** : Next.js 프로젝트를 위한 다국어 라이브러리 - **추천:** - 가장 보편적인 선택: react-i18next - Next.js 기반 프로젝트: next-intl ### React 리치 텍스트 에디터 - **[TipTap](https://tiptap.dev/)** : 확장성이 뛰어난 최신 리치 텍스트 에디터 - **[Plate](https://platejs.org/)** : Slate.js 기반의 강력한 에디터 솔루션 - **[Lexical](https://lexical.dev/)** : Facebook이 만든 경량 리치 텍스트 에디터 - **[Slate](https://www.slatejs.org/)** : 커스텀 가능한 리치 텍스트 에디터 프레임워크 - **추천:** - 유연한 확장성 필요 시: TipTap - 경량 & 최적화된 에디터: Lexical ### React 결제 시스템 - **[PayPal](https://developer.paypal.com/docs/checkout/)** : 가장 널리 사용되는 결제 시스템 중 하나 - **[Stripe](https://stripe.com/)** : 개발 친화적인 결제 API 제공 - [React Stripe Elements](https://github.com/stripe/react-stripe-js) - [Stripe Checkout](https://stripe.com/docs/payments/checkout) - 기타 결제 솔루션 - **[Braintree](https://www.braintreepayments.com/)** (PayPal 소유) - **[Lemon Squeezy](https://www.lemonsqueezy.com/)** (Stripe 기반) - **추천:** - 간편한 결제 솔루션: Stripe - PayPal 지원 필요 시: PayPal 또는 Braintree ### React에서 시간 및 날짜 처리 - **[date-fns](https://github.com/date-fns/date-fns)** : 가벼우면서도 다양한 날짜/시간 함수 제공 - **[Day.js](https://github.com/iamkun/dayjs)** : Moment.js의 가벼운 대안으로, API가 유사함 - **추천:** - 가장 가벼운 라이브러리: Day.js - 기능이 풍부한 라이브러리: date-fns ### React 데스크톱 애플리케이션 - **[Electron](https://www.electronjs.org/)** : - 크로스 플랫폼 데스크톱 애플리케이션 개발 프레임워크 - 웹 기술(HTML, CSS, JS)로 Windows, macOS, Linux 애플리케이션 제작 가능 - **[Tauri](https://github.com/tauri-apps/tauri)** - Electron보다 가벼운 대안으로 Rust 기반 백엔드 사용 - 보안성과 성능이 중요한 프로젝트에 적합 - **추천:** - 웹 기술을 그대로 활용: Electron - 경량 & 보안 우선: Tauri ### React 파일 업로드 - **[react-dropzone](https://react-dropzone.js.org/)** : 파일 업로드를 위한 React 훅 기반 라이브러리. 드래그 앤 드롭 기능 지원 ### React 이메일 렌더링 - **[react-email](https://react.email/)** (추천) : React 컴포넌트를 활용한 반응형 HTML 이메일 제작 가능 - **[mjml](https://mjml.io/)** : HTML 이메일을 간편하게 생성하는 마크업 언어 - **[Mailing](https://www.mailing.run/)** : 개발자가 쉽게 이메일을 생성하고 관리할 수 있도록 지원 - **[jsx-email](https://jsx.email/)** : JSX 문법을 활용한 이메일 템플릿 제작 가능 - 이메일 서비스 제공업체 : - **[Resend](https://resend.com/)** - **[Postmark](https://postmarkapp.com/)** - **[SendGrid](https://sendgrid.com/)** - **[Mailgun](https://www.mailgun.com/)** - **추천:** - React 스타일로 이메일 제작: react-email - 이메일 서비스 필요 시: SendGrid, Mailgun ### React 드래그 앤 드롭 - **[@hello-pangea/dnd](https://github.com/hello-pangea/dnd)** : `react-beautiful-dnd`의 후속 프로젝트로 간편한 사용법 제공 - **[dnd kit](https://dndkit.com/)** : 높은 유연성과 커스터마이징 가능하지만 학습 곡선이 있음 - **추천:** - 쉬운 드래그 앤 드롭: @hello-pangea/dnd - 커스터마이징 필요 시: dnd kit ### React 모바일 개발 - **[React Native](https://facebook.github.io/react-native/)** : React 기반의 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크 - **[Expo](https://www.robinwieruch.de/react-native-expo/)** : React Native 개발을 더욱 쉽게 만들어주는 툴체인 - **[Tamagui](https://tamagui.dev/)** : 웹과 모바일에서 동일한 UI 컴포넌트를 사용할 수 있도록 지원 - **추천:** - 모바일 개발: React Native + Expo - 웹과 모바일 UI 통합: Tamagui ### React VR/AR 개발 - **[react-three-fiber](https://github.com/pmndrs/react-three-fiber)** : Three.js 기반 3D 렌더링 라이브러리. VR 지원 사례 존재 - **[react-360](https://facebook.github.io/react-360/)** (아카이브됨) : 페이스북이 개발한 VR/AR 프레임워크 (현재 유지보수 중단) - **[aframe-react](https://github.com/supermedium/aframe-react)** (더 이상 유지보수 안됨) : A-Frame을 React에서 사용할 수 있도록 지원하는 라이브러리 - **추천:** - 최신 React 3D/VR 라이브러리: react-three-fiber ### React 디자인 프로토타이핑 - **[Figma](https://www.figma.com/)** : UI/UX 디자인 및 프로토타이핑을 위한 가장 인기 있는 툴 - **[Excalidraw](https://excalidraw.com/)** : 손으로 그린 듯한 와이어프레임 및 다이어그램 제작 가능 - **[tldraw](https://www.tldraw.com/)** : Excalidraw과 유사한 스케치 도구 - **추천:** - UI/UX 디자인: Figma - 간단한 와이어프레임: Excalidraw ### React 컴포넌트 문서화 - **[Storybook](https://storybook.js.org/)** : UI 컴포넌트 개발 및 문서화를 위한 대표적인 툴 - **[Docusaurus](https://github.com/facebook/docusaurus)** : 기술 문서를 위한 정적 사이트 생성기 - **[Styleguidist](https://github.com/styleguidist/react-styleguidist)** : React 컴포넌트 중심의 스타일 가이드 문서화 툴 - **[React Cosmos](https://reactcosmos.org/)** : UI 컴포넌트를 독립적으로 개발 및 테스트할 수 있는 환경 제공 - **추천:** - 컴포넌트 문서화: Storybook - 기술 문서 생성: Docusaurus ## Comments ### Comment 44851 - Author: tmdeoans - Created: 2025-10-12T16:09:50+09:00 - Points: 1 ssgoi.dev: 리액트 페이지전환 라이브러리 이것도 추가해주시면 감사 ㅎ.. ### Comment 35410 - Author: clastneo - Created: 2025-03-04T10:37:15+09:00 - Points: 1 expo는 RN의 프레임워크라고 봐야하지 않나 싶네요. ### Comment 35407 - Author: codemasterkimc - Created: 2025-03-04T10:20:37+09:00 - Points: 1 구글 트렌드 검색시 redux가 90프로 zustand 는 10프로도 안되는것으로 아는데 zustand 가 위에 있네요 ㅋㅋ ### Comment 35436 - Author: dooboo - Created: 2025-03-04T17:24:34+09:00 - Points: 2 - Parent comment: 35407 - Depth: 1 레거시의 힘이죠. 참고로 jQuery는 시장 점유율 90퍼센트입니다... ### Comment 35403 - Author: xguru - Created: 2025-03-04T10:05:04+09:00 - Points: 1 [React 기술 스택 2025](https://news.hada.io/topic?id=19538) 도 함께 참고하세요 ### Comment 35402 - Author: xguru - Created: 2025-03-04T10:04:04+09:00 - Points: 1 [2022년 현재 React로 앱 개발할 때 추천 라이브러리들](https://news.hada.io/topic?id=6338) 매년 업데이트 하고 있나본데, 3년만이네요. 비교해서 보시면 좋습니다.