게으른개발너D
[Library] Typescript를 이용한 React 앱 개발 본문
1. typescript
https://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
npm i styled-components
npm install @types/styled-components
3. React Router
https://reactrouter.com/en/main
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/
패치를 하는데 코드를 좀 더 짧게 쓸 수 있다
npm i react-query
cf) DevTools
data를 시각화해서 보여주기 위해 React Query에서 보여주는 도구
5. Recoil
Recoil은 global state인데
global state는 앱이 뭔가를 인지해야할 때
앱이 특정 value에 접근해야할 때 쓰는 것이다.
npm i recoil
cf) recoil-persist
recoil atom에 넣은 데이터들을 localStorage에 저장해줌
npm i recoil-persist
6. React Hook Form
폼 생성, 유효성 검사 등등
npm i react-hook-form
7. framer motion
https://www.framer.com/motion/
아름다운 애니메이션 만들기!
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 |