awesome-react

KO | EN

gitlite — search

#typescript #llm #go #golang #android #machine-learning #linux #docker #macos #windows #awesome #vue #security #mcp

(★ 74,293)

React 생태계에 관한 멋진 자료 모음

awesome-react 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Awesome React [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

React 생태계와 관련된 멋진 리소스 모음입니다.

- [React](#react)
  - [React 일반 리소스](#react-일반-리소스)
  - [React 튜토리얼](#react-튜토리얼)
  - [React 프레임워크](#react-프레임워크)
  - [React 컴포넌트 라이브러리](#react-컴포넌트-라이브러리)
  - [React 상태 관리 및 데이터 페칭](#react-상태-관리-및-데이터-페칭)
  - [React 스타일링](#react-스타일링)
  - [React 아이콘 라이브러리](#react-아이콘-라이브러리)
  - [React 라우팅](#react-라우팅)
  - [React 개발 도구](#react-개발-도구)
  - [React 라이브러리](#react-라이브러리)
  - [React 테스트](#react-테스트)
  - [React 멋진 컴포넌트들](#react-멋진-컴포넌트들)
  - [React 컴포넌트 샌드박스](#react-컴포넌트-샌드박스)
  - [React 폼](#react-폼)
  - [React 테이블 및 그리드](#react-테이블-및-그리드)
  - [React 맵](#react-맵)
  - [React 차트](#react-차트)
  - [React 렌더러](#react-렌더러)
  - [React 국제화](#react-국제화)
  - [React 그래픽 및 애니메이션](#react-그래픽-및-애니메이션)
  - [React 통합](#react-통합)
  - [React 실제 앱](#react-실제-앱)
- [React Native](#react-native)
  - [React Native 일반 리소스](#react-native-일반-리소스)
  - [React Native 네비게이션](#react-native-네비게이션)
  - [React Native 멋진 컴포넌트들](#react-native-멋진-컴포넌트들)
  - [React Native 라이브러리](#react-native-라이브러리)
- [기여하기](#기여하기)

### React

#### React 일반 리소스

- [React 공식 웹사이트](https://react.dev/)
- [React GitHub](https://github.com/facebook/react)
- [Reactiflux Discord 채널](https://www.reactiflux.com/)
- [React 커뮤니티](https://react.dev/community)
- [React 컨퍼런스](https://react.dev/community/conferences)
- [React CodeSandbox 플레이그라운드](https://codesandbox.io/s/new)

#### React 튜토리얼

- [React 공식 튜토리얼](https://react.dev/learn)
- [Visual Studio Code에서 React 사용하기](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial)
- [React 면접 질문 및 답변](https://github.com/sudheerj/reactjs-interview-questions)
- [ 강력한 웹 앱 구축을 위한 디자인 패턴 및 컴포넌트 패턴](https://www.patterns.dev/)
- [프로덕션 수준의 React 애플리케이션 구축을 위한 간단하고 확장 가능하며 강력한 아키텍처](https://github.com/alan2207/bulletproof-react)
- [TypeScript를 시작하는 숙련된 React 개발자를 위한 치트시트](https://github.com/typescript-cheatsheets/react)

#### React 프레임워크

- [next](https://github.com/vercel/next.js) - React 프레임워크
- [gatsby](https://github.com/gatsbyjs/gatsby) - React로 현대적인 웹사이트 구축
- [remix](https://github.com/remix-run/remix) - 사용자 인터페이스에 집중할 수 있게 해주는 풀스택 웹 프레임워크
- [react-admin](https://github.com/marmelab/react-admin) - B2B 애플리케이션 구축을 위한 프론트엔드 프레임워크
- [refine](https://github.com/refinedev/refine) - 제약 없이 React 기반 CRUD 애플리케이션 구축
- [vike](https://github.com/vikejs/vike) - 모듈형 프레임워크 - Next.js 및 Nuxt 대안

#### React 컴포넌트 라이브러리

- [shadcn-ui](https://github.com/shadcn-ui/ui) - Radix UI와 Tailwind CSS를 사용하여 아름답게 디자인된 컴포넌트
- [ant-design](https://github.com/ant-design/ant-design) - 엔터프라이즈급 UI 디자인 언어 및 React UI 라이브러리
- [material-ui](https://github.com/mui/material-ui) - 바로 사용할 수 있는 기본 React 컴포넌트
- [chakra-ui](https://github.com/chakra-ui/chakra-ui) - 빠른 속도로 SaaS 제품을 구축하기 위한 컴포넌트 시스템
- [react-bits](https://github.com/DavidHDev/react-bits) - 애니메이션이 적용되고 인터랙티브하며 완전히 커스텀 가능한 React 컴포넌트 모음
- [mantine](https://github.com/mantinedev/mantine) - 모든 기능을 갖춘 React 컴포넌트 라이브러리
- [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - React로 구축된 Bootstrap 컴포넌트
- [fluentui](https://github.com/microsoft/fluentui) - Microsoft의 Fluent UI
- [framework7](https://github.com/framework7io/framework7) - iOS 및 Android 앱 구축을 위한 모든 기능을 갖춘 HTML 프레임워크
- [ariakit](https://github.com/ariakit/ariakit) - 접근성 높은 웹 앱을 React로 구축하기 위한 툴킷
- [react-email](https://github.com/resend/react-email) - 아름다운 이메일을 생성하기 위한 스타일이 지정되지 않은 컴포넌트
- [8bitcn-ui](https://github.com/TheOrcDev/8bitcn-ui) - shadcn 기반으로 구축된 레트로 8비트 테마의 React 컴포넌트 라이브러리
- [headlessui](https://github.com/tailwindlabs/headlessui) - React를 위한 완전히 스타일이 없고 접근성 있는 UI 컴포넌트
- [ruixen-ui](https://github.com/ruixenui/ruixen.com) - 우아한 디자인의 현대적이고 가벼운 React 컴포넌트 라이브러리

#### React 상태 관리 및 데이터 페칭

- [redux](https://github.com/reduxjs/redux) - JavaScript 앱을 위한 예측 가능한 상태 컨테이너
- [mobx](https://github.com/mobxjs/mobx) - 간단하고 확장 가능한 상태 관리
- [zustand](https://github.com/pmndrs/zustand) - React 상태 관리를 위한 필수 기능들
- [tanstack-query](https://github.com/TanStack/query) - 강력한 비동기 상태 관리
- [swr](https://github.com/vercel/swr) - 데이터 페칭을 위한 React Hooks
- [apollo-client](https://github.com/apollographql/apollo-client) - 모든 기능을 갖춘 프로덕션 준비 완료 캐싱 GraphQL 클라이언트
- [relay](https://github.com/facebook/relay) - 데이터 중심 React 애플리케이션 구축을 위한 프레임워크
- [jotai](https://github.com/pmndrs/jotai) - React를 위한 원시적이고 유연한 상태 관리
- [xstate](https://github.com/statelyai/xstate) - 현대 웹을 위한 상태 머신 및 상태 차트
- [effector](https://github.com/effector/effector) - 손쉬운 비즈니스 로직
- [immer](https://github.com/immerjs/immer) - 현재 상태를 변형하여 다음 불변 상태 생성
- [immutable-js](https://github.com/immutable-js/immutable-js) - JavaScript를 위한 불변 영구 데이터 컬렉션
- [rxdb](https://github.com/pubkey/rxdb) - JavaScript 애플리케이션을 위한 빠르고 오프라인 우선(offline-first)인 반응형 데이터베이스

#### React 스타일링

- [styled-components](https://github.com/styled-components/styled-components) - 컴포넌트 시대를 위한 시각적 프리미티브
- [emotion](https://github.com/emotion-js/emotion) - 고성능 스타일 구성을 위해 설계된 CSS-in-JS 라이브러리
- [vanilla-extract](https://github.com/vanilla-extract-css/vanilla-extract) - 런타임이 없는 TypeScript 스타일시트

#### React 아이콘 라이브러리

- [react-icons](https://github.com/react-icons/react-icons) - 인기 있는 아이콘 팩의 SVG React 아이콘
- [lucide-react](https://github.com/lucide-icons/lucide) - 아름답고 일관된 아이콘 툴킷
- [heroicons](https://github.com/tailwindlabs/heroicons) - Tailwind CSS 제작자들이 직접 만든 아름다운 SVG 아이콘
- [thesvg](https://github.com/GLINCKER/thesvg) - 인기 있는 브랜드와 기술을 위한 무료 SVG 아이콘 모음

#### React 라우팅

- [react-router](https://github.com/remix-run/react-router) - React를 위한 선언적 라우팅
- [tanstack-router](https://github.com/TanStack/router) - 내장 캐싱 및 URL 상태 관리가 포함된 타입 안전 라우터

#### React 개발 도구

- [vite](https://github.com/vitejs/vite) - 차세대 프론트엔드 툴링
- [parcel](https://github.com/parcel-bundler/parcel) - 웹을 위한 제로 설정 빌드 도구
- [reactotron](https://github.com/infinitered/reactotron) - React 및 React Native 프로젝트를 검사하기 위한 데스크톱 앱
- [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) - ESLint를 위한 React 전용 린팅 규칙
- [react-scan](https://github.com/aidenybai/react-scan) - React 성능 문제를 스캔하고 앱에서 느린 렌더링 제거
- [why-did-you-render](https://github.com/welldone-software/why-did-you-render) - 피할 수 있는 리렌더링에 대해 알려주도록 React에 몽키 패치 적용

#### React 라이브러리

- [ai-sdk](https://github.com/vercel/ai) - Next.js 제작자들이 만든 TypeScript 및 React용 AI 툴킷
- [preact](https://github.com/preactjs/preact) - 동일한 최신 API를 갖춘 빠른 React 대안
- [floating-ui](https://github.com/floating-ui/floating-ui) - 플로팅 요소를 생성하기 위한 툴킷
- [loadable-components](https://github.com/gregberge/loadable-components) - React 권장 코드 분할(Code Splitting) 라이브러리
- [react-uploady](https://github.com/rpldy/react-uploady) - React용 최신 파일 업로드 컴포넌트 및 훅
- [downshift](https://github.com/downshift-js/downshift) - React 자동 완성, 콤보박스 또는 셀렉트 드롭다운 컴포넌트
- [react-error-boundary](https://github.com/bvaughn/react-error-boundary) - 에러를 잡을 수 있게 해주는 React 에러 바운더리 컴포넌트

#### React 테스트

- [jest](https://github.com/jestjs/jest) - 즐거운 JavaScript 테스트
- [react-testing-library](https://github.com/testing-library/react-testing-library) - 간단하고 완전한 React DOM 테스트 유틸리티
- [cypress](https://github.com/cypress-io/cypress) - 브라우저에서 실행되는 모든 것을 위한 빠르고 쉽고 신뢰할 수 있는 테스트
- [playwright](https://github.com/microsoft/playwright) - 웹 테스트 및 자동화를 위한 프레임워크

#### React 멋진 컴포넌트들

- [Awesome React Components](https://github.com/brillout/awesome-react-components)
- [react-select](https://github.com/JedWatson/react-select) - React를 위한 Select 컴포넌트
- [react-big-calendar](https://github.com/bigcalendar/react-big-calendar) - 캘린더 컴포넌트
- [react-datepicker](https://github.com/Hacker0x01/react-datepicker/) - React를 위한 간단하고 재사용 가능한 날짜 선택기 컴포넌트
- [react-qrcode](https://github.com/zpao/qrcode.react) - React와 함께 사용하는 QR 컴포넌트
- [react-archer](https://github.com/pierpo/react-archer) - React 요소 사이에 화살표 그리기
- [react-complex-tree](https://github.com/lukasbach/react-complex-tree) - 중립적이고 접근성 있는 트리
- [react-insta-stories](https://github.com/mohitk05/react-insta-stories) - 인스타그램 스타일의 스토리를 위한 React 컴포넌트
- [react-hot-toast](https://github.com/timolins/react-hot-toast) - React용 가볍고 커스텀 가능한 토스트 알림
- [swiper](https://github.com/nolimits4web/swiper) - 가장 현대적인 모바일 터치 슬라이더
- [keen-slider](https://github.com/rcbyr/keen-slider) - 터치 슬라이더 캐러셀
- [heart-switch](https://github.com/anatoliygatt/heart-switch) - React용 하트 모양 토글 스위치 컴포넌트
- [kbar](https://github.com/timc1/kbar) - 사이트를 위한 빠르고 이식 가능하며 확장 가능한 cmd+k 인터페이스
- [tagify](https://github.com/yairEO/tagify) - 가볍고 효율적인 태그 입력 컴포넌트
- [puck](https://github.com/puckeditor/puck) - React용 시각적 편집기
- [json-edit-react](https://github.com/CarlosNZ/json-edit-react) - 고도로 설정 가능한 JSON/객체 트리 편집기/뷰어

#### React 컴포넌트 샌드박스

- [storybook](https://github.com/storybookjs/storybook) - UI 컴포넌트와 페이지를 격리하여 구축하기 위한 프론트엔드 워크숍
- [react-cosmos](https://github.com/react-cosmos/react-cosmos) - 재사용 가능한 React 컴포넌트를 만들기 위한 개발 도구
- [bit](https://github.com/teambit/bit) - 조합 가능한 소프트웨어 개발을 위한 빌드 시스템

#### React 폼

- [react-hook-form](https://github.com/react-hook-form/react-hook-form) - 폼 상태 관리 및 유효성 검사를 위한 React Hooks
- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form) - JSON Schema에서 웹 폼을 구축하기 위한 React 컴포넌트
- [formily](https://github.com/alibaba/formily) - 알리바바 그룹 통합 폼 솔루션
- [tanstack-form](https://github.com/TanStack/form) - 헤드리스, 고성능, 타입 안전 폼 상태 관리

#### React 테이블 및 그리드

- [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) - 반응형 중단점(breakpoint)을 지원하는 드래그 및 크기 조절 가능한 그리드 레이아웃
- [tanstack-table](https://github.com/TanStack/table) - 강력한 테이블 및 데이터 그리드 구축을 위한 헤드리스 UI
- [react-data-grid](https://github.com/Comcast/react-data-grid) - 기능이 풍부하고 커스텀 가능한 데이터 그리드 React 컴포넌트

#### React 맵

- [react-map-gl](https://github.com/visgl/react-map-gl) - MapboxGL JS를 감싸는 React 친화적 API 래퍼
- [react-leaflet](https://github.com/PaulLeCam/react-leaflet) - Leaflet 맵을 위한 React 컴포넌트

#### React 차트

- [recharts](https://github.com/recharts/recharts) - React와 D3로 구축된 재정의된 차트 라이브러리
- [visx](https://github.com/airbnb/visx) - 시각화 컴포넌트
- [victory](https://github.com/FormidableLabs/victory) - 인터랙티브 데이터 시각화를 구축하기 위한 조합 가능한 React 컴포넌트 모음
- [react-vis](https://github.com/uber/react-vis) - 데이터 시각화 컴포넌트
- [nivo](https://github.com/plouc/nivo) - D3 및 React 라이브러리를 기반으로 구축된 풍부한 데이터 시각화 컴포넌트 제공
- [xyflow](https://github.com/xyflow/xyflow) - 노드 기반 편집기와 인터랙티브 다이어그램을 구축하기 위한 커스텀 가능한 React 컴포넌트

#### React 렌더러

- [react-three-fiber](https://github.com/pmndrs/react-three-fiber) - Three.js용 React 렌더러
- [ink](https://github.com/vadimdemedes/ink) - 인터랙티브 커맨드 라인 앱을 위한 React
- [remotion](https://github.com/remotion-dev/remotion) - React로 프로그래밍 방식으로 비디오 만들기
- [react-pdf](https://github.com/diegomura/react-pdf) - React를 사용하여 PDF 파일 생성
- [react-figma](https://github.com/react-figma/react-figma) - Figma용 React 렌더러
- [markdown-to-jsx](https://github.com/quantizor/markdown-to-jsx) - 매우 빠르고 다재다능한 마크다운 툴체인

#### React 국제화

- [formatjs](https://github.com/formatjs/formatjs) - 웹 앱 국제화
- [react-i18next](https://github.com/i18next/react-i18next) - 제대로 구현된 React 국제화
- [react-intlayer](https://github.com/aymericzip/intlayer) - React의 유지보수성에 초점을 맞춘 국제화

#### React 그래픽 및 애니메이션

- [react-spring](https://github.com/pmndrs/react-spring) - 스프링 물리학 기반 React 애니메이션 라이브러리
- [framer-motion](https://github.com/motiondivision/motion) - React를 위한 오픈 소스, 프로덕션 준비 완료 애니메이션 및 제스처 라이브러리
- [auto-animate](https://github.com/formkit/auto-animate) - 부드러운 전환을 추가해 주는 제로 설정 드롭인 애니메이션 유틸리티
- [react-tsparticles](https://github.com/tsparticles/tsparticles) - 고도로 커스텀 가능한 파티클 효과를 쉽게 생성
- [react-parallax-tilt](https://github.com/mkosir/react-parallax-tilt) - React 컴포넌트에 틸트 호버 효과를 쉽게 적용
- [simple-parallax-js](https://github.com/geosigno/simpleParallax.js) - React와 JavaScript로 패럴랙스 효과를 얻는 가장 쉬운 방법

#### React 통합

- [rescript-compiler](https://github.com/rescript-lang/rescript) - 효율적이고 읽기 쉬운 JavaScript로 컴파일되는 강력한 타입 언어
- [fulcro](https://github.com/fulcrologic/fulcro) - clj/cljs로 웹 애플리케이션 개발을 위한 라이브러리

#### React 실제 앱

- [mattermost-server](https://github.com/mattermost/mattermost) - 안전한 협업을 위한 오픈 소스 플랫폼
- [kibana](https://github.com/elastic/kibana) - Elastic Stack으로 향하는 창구
- [webamp](https://github.com/captbaritone/webamp) - 브라우저용으로 재구현된 Winamp 2
- [overreacted](https://github.com/gaearon/overreacted.io) - Dan Abramov의 개인 블로그
- [wave](https://github.com/wavetermdev/waveterm) - 원활한 워크플로우를 위한 오픈 소스 크로스 플랫폼 터미널
- [readest](https://github.com/readest/readest) - 미니멀하고 기능이 풍부한 크로스 플랫폼 전자책 리더
- [bookcars](https://github.com/aelassas/bookcars) - 자동차 렌탈 플랫폼
- [notifuse](https://github.com/Notifuse/notifuse) - 뉴스레터 및 트랜잭션 이메일을 보내기 위한 현대적인 자체 호스팅 이메일링 플랫폼

### React Native

#### React Native 일반 리소스

- [React Native 공식 웹사이트](https://reactnative.dev/)
- [React Native GitHub](https://github.com/facebook/react-native)
- [React Native 커뮤니티](https://reactnative.dev/community/overview)
- [Expo](https://expo.dev/)

#### React Native 네비게이션

- [react-navigation](https://github.com/react-navigation/react-navigation) - React Native 앱을 위한 라우팅 및 네비게이션

#### React Native 멋진 컴포넌트들

- [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) - React Native용 커스텀 가능한 아이콘
- [react-native-gifted-chat](https://github.com/FaridSafi/react-native-gifted-chat) - React Native를 위한 가장 완벽한 채팅 UI

#### React Native 라이브러리

- [realm-js](https://github.com/realm/realm-js) - 모바일 데이터베이스: SQLite 및 키-값 저장소의 대안
- [react-native-device-info](https://github.com/react-native-device-info/react-native-device-info) - React Native iOS 및 Android용 디바이스 정보
- [react-native-maps](https://github.com/react-native-maps/react-native-maps) - React Native Mapview 컴포넌트

### 기여하기

이 목록은 React와 관련된 흥미로운 것들을 개인적으로 모은 것에서 시작되었습니다. 시작 당시 React는 아직 베타 버전이었고, JSX를 JS로 변환하기 위해 특별한 스크립트가 필요했으며, Flux(기억하신다면)는 아직 출시되지도 않았었습니다. 오늘날 React는 지루할 정도로 주류가 되었습니다. 이 목록을 광고판이나 실험을 홍보하는 공간으로 사용하지 말아 주세요. 우리는 여기서 완전히 무료인 리소스를 공유하는 데 집중하고 있습니다. 오래된 프로젝트나 기사에 대한 업데이트 제안 및 새로운 기여를 환영합니다. GitHub 링크를 선호합니다. 여러분의 의견과 제안에 진심으로♡ 감사드립니다. (✿◠‿◠)

[![CC0](https://i.creativecommons.org/l/by/4.0/88x31.png)](https://creativecommons.org/licenses/by/4.0/)

awesome-react

awesome-react 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

awesome-react

awesome-react 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README