# 2022년 현재 React로 앱 개발할 때 추천 라이브러리들

> Clean Markdown view of GeekNews topic #6338. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=6338](https://news.hada.io/topic?id=6338)
- GeekNews Markdown: [https://news.hada.io/topic/6338.md](https://news.hada.io/topic/6338.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2022-04-11T09:46:01+09:00
- Updated: 2022-04-11T09:46:01+09:00
- Original source: [robinwieruch.de](https://www.robinwieruch.de/react-libraries/)
- Points: 24
- Comments: 7

## Topic Body

- React 프로젝트 생성 : 클라이언트에는 Vite/CRA, 서버에는 Next.js/Remix/Gatsby  
- React State 관리 : useState/useReducer, useContext, Redux   
- React Data Fetching : React Query (REST APIs, GraphQL APIs) + axios, Apollo Client   
- Routing with React Router   
- CSS Styling in React : CSS-in-CSS, CSS-in-JS/Emotion/Stitches, Functional CSS with Tailwind CSS  
- React UI Libraries : Material UI(가장 인기), Mantine(추천), Chakua UI(추천), Ant Design, Radix, Primer, NextUI, Tailwind UI (not free), Semantic UI, React Bootstrap  
- React Animation Libraries : Framer Motion (가장 추천), react-spring (종종 추천), react-motion, react-move, Animated (React Native)   
- Visualization and Chart Libraries in React : Recharts, react-chartjs, nivo, visx, Victory  
- Form Libraries in React : React Hook Form + yup/zod   
- React Type Checking : 그냥 TypeScript 쓰세요   
- React Code Structure: Style and Format : ESLint + Prettier  
- React Authentication : Firebase, Auth0, AWS Cognito 같은 서비스/BaaS 선택   
- React Hosting : 풀 관리하려면 Digital Ocean, 아니면 Cloudflare Workers, Netlify, or Vercel (특히 Next.js), Firebase 쓴다면 Firebase Hosting  
- Testing in React :  Jest + React Testing Library (most popular), Cypress  
- React and Immutable Data Structures : Immer  
- React Internationalization : FormatJS, react-i18next  
- Rich Text Editor in React : Draft.js, Slate.js, ReactQuill  
- Payments in React :PayPal, React Stripe Elements 또는 Stripe Checkout  
- Time in React : date-fns, Day.js, Luxon  
- React Desktop Applications : Electron, Tauri, NW.js, Neutralino.js  
- Mobile Development with React : React Native, Expo   
- React VR/AR : react-three-fiber, react-360, aframe-react  
- Design Prototyping for React : Figma, Zeplin, Excalidraw, InVision  
- React Component Documentation : Storybook, Docusaurus, Docz, Styleguidist

## Comments



### Comment 9587

- Author: rinae
- Created: 2022-04-11T15:07:57+09:00
- Points: 2

원글 작성자분이 생각한 디자인 프로토타이핑의 범주가 목업 수준인거같긴한데, 인터랙티브 프로토타이핑하면 Framer가 빠질 수 없어보입니다.  
  
https://www.framer.com/

### Comment 9586

- Author: sujang
- Created: 2022-04-11T14:50:53+09:00
- Points: 2

요즘은 redux보다 recoil, zustand같은 라이브러리도 인기입니다

### Comment 9585

- Author: 00001
- Created: 2022-04-11T13:20:40+09:00
- Points: 1

React Desktop Applications 부분도, electron이 포함되야될거 같네요

### Comment 9582

- Author: rtyu1120
- Created: 2022-04-11T11:35:19+09:00
- Points: 1

요거 데스크탑 앱도 본문에서 Electron을 go-to라고 가장 추천하는 것 같네요 ㅎㅎ

### Comment 9589

- Author: xguru
- Created: 2022-04-11T15:48:07+09:00
- Points: 1
- Parent comment: 9582
- Depth: 1

수정해두었습니다. 고맙습니다 ㅎㅎ

### Comment 9576

- Author: spilist2
- Created: 2022-04-11T10:22:37+09:00
- Points: 1

마지막 react component documentation에서는, 자기는 스토리북밖에 안써봐서 스토리북에 추천할 수 없지만 Docusaurus, Docz, Styleguidist도 좋다고 들었다, 라고 한 것이니 스토리북을 포함해야 할 것 같아요.

### Comment 9577

- Author: xguru
- Created: 2022-04-11T10:28:05+09:00
- Points: 1
- Parent comment: 9576
- Depth: 1

아 그렇네요. 수정해 두었습니다~