[React] 리액트 라이브러리 추천 목록(2024 기준)

 

기존 Ykss 님이 번역하신 글을 표로 정리한 글입니다 

실 사용 경험과는 상관 없이 지극히 개인적 취향을 목적으로 정리하였으니,

맨 아래 원문을 참고하시길 바랍니다.

 

구분	이름 및 링크	비고
build tool	Vite
패키지 매니저	pnpm	성능적으로 npm 보다 향상된 pnpm 기본적이고 가장 널리 사용되는 건 -> npm 모노레포가 필요한 경우 -> Turborepo
상태관리	Zustand	Api context 는 최적화시 개발자가 직접 최적화 해야하는 번거로움이 있어 Zustand + tanstack Query 로 풀어낸다
데이터 페칭	TanStack Query	REST API 또는 GraphQL API
라우팅	React Router	타입스크립트면 TanStack Router
CSS	Tailwind CSS	https://runebook.dev/ko/docs/tailwindcss/  (한국어 사이트)
UI 라이브러리	shadcn/ui
애니메이션 라이브러리	Framer Motion
시각화 & 차트 라이브러리	Recharts	가파른 학습곡선이지만 커스터 마이징이 필요하면 D3
폼 라이브러리	React Hook Form
코드 구조	ESLint, Prettier
인증	Lucia Auth.js Firebase Auth Supabase Auth AWS Cognito Clerk	개발 환경에 따라 추천 순위가 다름 Next 는 Auth.js (NextAuth.js)이지만 현재 몇몇 이슈가 있음 Clerk 는 인증 에러 구현이 상대적으로 쉽다고 함 Lucia 는 TypeScript 가능하며 다양한 프레임 워크 지원
백엔드	Express Nest tRPC	Next,  Astro 또는 Remix 같은 메타 프레임 워크 1인 개발을 경우 tRPC
데이터베이스	Prisma 혹은 서버리스  Firebase/Supabase	Prisma은 ORM
호스팅	Vercel Netlify 혹은  AWS/Azure/Google Cloud	Next 인 경우 : Vercel
테스트	Jest viest React Testing Library (RTL) Cypress	1. 단위 테스트 : jest viest( jest 보다 더 나은 성능) 2. 통합 테스트 : RTL 3. E2E 테스트 : Cypress
불변 데이터 구조	immer
국제화	react-i18next
리치 텍스트 편집기	Lexical	Plate 에 비해 더 넓은 생태계 공식 예제와 플러그인 다수 Stack Overflow 등에서 더 많은 질문과 답변 Meta의 지원으로 장기적 안정성 보장
결제	토스 페이먼츠
시간	Day.js
데스크톱 애플리케이션	Electron
파일 업로드	react-dropzone
메일	react-email
드래그 앤 드롭	dnd
모바일 개발	Expo Flutter	Expo는  React Native 프레임워크
디자인 프로토타이핑	Figma
컴포넌트 문서화	Storybook

 

 

본문

https://ykss.netlify.app/translation/react_libraries_for_2024/?utm_source=substack&utm_medium=email#%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%A4%EB%8B%88%EC%A0%80

(번역) 2024 리액트 라이브러리