React - 타입스크립트 버전으로 리액트 프로젝트 생성부터 자주쓰는 npm설치 정리

자주 사용하는 명령어들을 모아두기 위해 포스팅을 진행합니다.

 

typescript for react

타입스크립트 버전으로 리액트 프로젝트가 생성된다. my-app부분에 프로젝트명으로 입력

npx create-react-app my-app --template typescript

 

 

styled-component

태그를 생성하고 css를 꾸밀수 있고, 변수를 활용할 수 있다.(1번은 일반, 2번은 타입스크립트버전 설치)

npm i styled-components // 일반.ver
npm i --save-dev @types/styled-components // typescript.ver

 

 

react-router-dom

BrowserRouter, Routes, Route, Link등의 컴포넌트를 사용하여 설정한 경로에 따라 페이지를 렌더링해주는걸 도와준다.

react route dom이 v6이상으로 올라오면서 사용법이 대체적으로 변경되었다. 

(예를들면 Link to prop에 object형태로 옵션을 줄 수 있었으나 각각 prop형태로 적용하도록 변경되었고, 기존에 Switch의 컴포넌트 대신 Routes로 변경되었다.)

npm i react-router-dom

 

 

react-query

useQuery를 사용하여 fetch함수등을 사용하여 api로 데이터를 요청하고 받아오던 행위들을 모아놓고 모듈화를 도와준다.

또한 데이터를 캐싱시켜서 페이지 로드시 속도 개선에도 도움을 준다.

npm i @tanstack/react-query

 

 

react-helmet

사용하면 어디서든 해당 페이지 document의 head태그로 접근 할 수 있다.

title이나 favicon, css, meta태그등 다양하게 접근하고 변경할 수 있도록 도와준다.

npm i --save-dev @types/react-helmet

 

 

recoil

React의 state management 라이브러리로 페이스북에서 만들었다.

redux와 비슷한 개념으로 사용이 간편하고 쉽다 atom을 사용하여 어디서든 state에 접근하고 사용할 수 있으며, atom의 데이터를 원하는 형태로 변형하여 읽기전용 느낌의 seletor를 사용할 수도 있다.

npm install recoil

 

 

react-hook-form

form태그와 input, select등 form입력의 다양한 키입력 온클릭등의 이벤트 처리와 유효성을 도와준다.

npm install react-hook-form

 

 

react-beatiful-dnd

React프로젝트에서 드래그 앤 드랍처리를 도와주는 라이브러리다.

DragDropContext와 Droppable, Draggable 영역에 대한 이해와 magic(provider), snapshot의 대한 공부를 하고 작성하면 생각보다 쉽게 이벤트 처리를 할 수 있고, 드래그중 드래그 완료 후 각각의 요소별로 css등의 처리를 할 수 있다.

npm i react-beautiful-dnd // 일반.ver
npm i --save-dev @types/react-beautiful-dnd // typescript.ver

 

 

framer-motion

react페이지의 인터렉티브한 효과를 도와주는 애니메이션 라이브러리입니다.

간단한 prop이나 layout속성 추가만으로 컴포넌트간의 애니메이션을 연결해주거나 처리해줄수 있습니다.

npm install framer-motion

 

gh-pages

작성한 리액트 프로젝트를 빌드하여 자신의 github로 배포하도록 도와준다.

npm i gh-pages