ReactJS 애니메이션 라이브러리 * 공식 문서 * https://www.framer.com/developers/ 1. 라이브러리 설치 npm install framer-motion 2. 기본 사용 방법 import { motion } from "framer-motion"; export const MyComponent = ({ isVisible }) => ( ) 애니메이션 효과를 주기 위해서는 element가 motion 패키지에서 나와야 한다. 3. Styled 컴포넌트를 활용하기 Style-Components 란? https://cocococo.tistory.com/8 const Box = styled(motion.div)` width: 200px; height: 200px; background-c..

드래그 앤 드롭 라이브러리 Source Code https://github.com/kangilbin/React.js/tree/master/DragAndDrop 1. 라이브러리 설치 npm i react-beautiful-dnd /* typscript */ npm i --save-dev @types/react-beautiful-dnd ( index .tsx ) // 삭제 ... React 18 버전에서의 StrictMode를 지원하지 않기 때문에 index파일에서 StrictMode를 지워야 한다. DragDropContext : 드래그 앤 드롭이 가능하게 하고자 하는 영역 감싼다. Droppable : 어떠한 것을 드래그 앤 드롭할 수 있는 영역 Draggable : Droppable 영역 안에서 실제 ..

리액트에서 Input Validation, Form Submit 등 작업을 하기 좋은 방법이다. 보통 Form의 검증이 많거나, 많은 Input을 가질 때 사용한다. 1. 라이브러리 설치 npm install react-hook-form 2. React Hook Form 사용하지 않을 경우 // state const [name, setName] = useState(""); const [phone, setPhone] = useState(""); const [email, setEamil] = useState(""); const [id, setId] = useState(""); // 검증 const [nmErr, setNmErr] = useState(""); ... 반복 const onSubmit = (eve..

데이터를 시각화 해주는 차트 라이브러로 js, angular, vue, react에서도 사용 가능하다. 선 그래프, 거품형, 타임라인, 히트맵까지 다양한 스타일들이 있고, 반응형에 커스텀 기능까지 구현되어 있다. * ApexCharts 사이트 * https://apexcharts.com/ 1. 라이브러리 다운 npm install --save react-apexcharts apexcharts 2. Chart 예시 import Chart from "react-apexcharts"; function App() { return ( `$ ${value.toFixed(2)}` }, }, }} /> ); } export default App; type : 원하는 차트 선택 (선 그래프, 막대 그래프 등) optio..

React Query는 API 통신, 캐싱 등 비동기 과정을 더욱 편하게 하는 데 사용된다. ** 장점 ** 1) fetcher 함수를 만들어 연결시키고, 응답 데이터를 받아온다. ( API 통신 ) 2) Caching 매커니즘을 가지고 있어 고유의 key값을 넘기게 되면 API 통신을 하지 않고, 캐시에 저장되어 있던 데이터를 가져온다. (다시 불러올 경우 캐시에서 가져옴) 3) ReactQueryDevTools 라는 컴포넌트를 가지고 있는데 캐시에 어떤 query가 있는지 보여주고, Data Explorer를 보여준다. 1. 라이브러리 설치 npm i react-query 2. useQuery 사용방법 2-1) Provider 패턴 적용 ( index.tsx ) import React from "re..

CSS를 따로 설정하지 않으면 브라우저의 기본 스타일이 적용되어있다. 때때로 List의 Item들에 padding, margin 등 설정되어있는데 일일이 0으로 설정해줘야 하는 경우가 있다. 이럴 때 CSS 셋업을 통해 내가 원하는 CSS를 적용해주면 편리하게 사용 가능하다. 1. 필요 라이브러리 (styled-components) npm i styled-components npm i --save-dev @types/styled-components 2. 전체 도큐먼트에 적용 방법 import { createGlobalStyle } from "styled-components"; import Router from "./Router"; /* 전역 스코프에 올림 */ const GlobalStyle = crea..

TypeScript는 JavaScript의 상위 집합으로 JavaScript에서 제공하는 대부분을 지원한다. ES5 모든 문법, ES6의 문법의 대부분을 사용 가능하다. 1. Props /* props 타입 정의 */ interface DummyProps { text: string; // 값 명시 text: "Hi"|"Hello"|"By" } /* 오브젝트의 타입이 DummyProps */ const Dummy = ({text}:DummyProps) => { return {text} } function App() { return ; } interface를 통해 props 타입을 정의해 준다. Dummy컴포넌트의 오브젝트에 타입을 지정한다. 값을 명시하게 되면 이외 문자 사용 x 2. Optional(선택..

1. 새로운 프로젝트 생성 방법. npx create-react-app 파일명 --template typescript 확장자 ts : 순수 TypeScript 파일이다. (JavaScript의 .js) 확장자 tsx : TypeScirpt에 React문법을 담은 확장자 파일이다. (JavaScript의 .jsx) 2. 기존 ReactJS파일을 TypeScript로 변환 방법. npm install --save typescript @types/node @types/react @types/react-dom @types/jest @types/이 package이름에 앞에 붙음으로써 nodeJS, react, jest 각각에 typescript의 문법을 적용 이후, js확장자를 tsx확장자로 변경 3. 라이브러리..

TypeScirpt는 Javascript의 확장판으로 Strongly-Type언어이다. Strongly-Typed란? 프로그래밍 언어가 작동하기 전에 Type을 확인 한다는 말이다. TypeScript - 컴파일 에러 (코딩할 때 알 수 있음) JavaScript - 런타임 에러 1. JavaScript와 TypeScript /*** JavaScript ***/ const plus = (a, b) => a + b; plus(2,2) // 4 plus(4, "h2") // 2h2 - a + b의 결과만 내보낸다. /*** TypeScript ***/ const plus = (a:number, b:number) => a + b; plus(2,2) // 4 plus(4, "h2") // 오류 발생 - para..

css 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 한다. css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있다. css를 적용하기 위한 3가지 방법 - 태그에 직접 속성 style={} - 적용 속성 모듈화 파일 생성 (Button.module.css) - Style Component 1. 라이브러리 설치 npm i styled-components /* TypeScript의 경우 추가 */ npm i @types/styled-components 2. 사용방법 import styled from "styled-com..