게으른개발너D
[Library] Typescript를 이용한 React 앱 개발 본문
1. typescript
https://www.typescriptlang.org/
JavaScript With Syntax For Types.
TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.
www.typescriptlang.org
typescript가 포함된 react 앱을 만들려면
npx create-react-app 앱이름 --template typescript
또는 이미 react 프로젝트를 생성하였다면
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
cf) react 설치
npx create-react-app 앱이름
2. Styled-Component
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾
styled-components.com
npm i styled-components
npm install @types/styled-components
3. React Router
https://reactrouter.com/en/main
Home v6.8.1
I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away.
reactrouter.com
v recently
npm i react-router-dom
v 5.3
npm i react-router-dom@5.3.0 react-query
npm i --save-dev @types/react-router-dom
4. React Query
https://react-query-v3.tanstack.com/
TanStack Query | React Query, Solid Query, Svelte Query, Vue Query
Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue
tanstack.com
패치를 하는데 코드를 좀 더 짧게 쓸 수 있다
npm i react-query
cf) DevTools
data를 시각화해서 보여주기 위해 React Query에서 보여주는 도구
5. Recoil
Recoil
A state management library for React.
recoiljs.org
Recoil은 global state인데
global state는 앱이 뭔가를 인지해야할 때
앱이 특정 value에 접근해야할 때 쓰는 것이다.
npm i recoil
cf) recoil-persist
recoil atom에 넣은 데이터들을 localStorage에 저장해줌
npm i recoil-persist
6. React Hook Form
Home
React hook for form validation without the hassle
react-hook-form.com
폼 생성, 유효성 검사 등등
npm i react-hook-form
7. framer motion
https://www.framer.com/motion/
Documentation | Framer for Developers
An open source, production-ready motion library for React on the web.
www.framer.com
아름다운 애니메이션 만들기!
npm install framer-motion
8. react-beautiful-dnd
https://www.npmjs.com/package/react-beautiful-dnd
드래그 구현
npm i react-beautiful-dnd
etc
1. react-helmet
title 등 head 값 변경하기
npm i --save-dev @types/react-helmet
2. 그래프
'개발 > ReactJS' 카테고리의 다른 글
| [Custom Hooks 1] useState 이용 (0) | 2023.10.30 |
|---|---|
| React Query 개념 (1) | 2023.08.30 |
| string 형태의 html을 html로 렌더링하기 (dangerouslySetInnerHTML) (0) | 2023.07.08 |
| 부모 컴포넌트에서 useState 사용에 따른 리로딩 (feat. setTimeout) (0) | 2023.06.05 |
| [Build] gh-pages에 deploy하기 (0) | 2023.04.30 |
