NextJS Next.js는 Pre-Rendering, 서버 사이드 렌더링(SSR), 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다 * ReactJS는 Client-Side-Rendering 방식이다. 1.Client-Side-Rendering( CSR ) 이란? CSR은 클라이언트(사용자)에서 모두 처리하는 방법으로 서버에서 전체 페이지를 최초에 한번 렌더링 하여 보여주고 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링 하는 방식이다. SSR과 달리 서버에 HTML 문서를 요청하는 것이 아니라, 브라우저에서 자바스크립트로 콘텐츠를 렌더링 하는 것이다. ( 최초 렌더링된 HTML ) ..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 Share Layout Animation 레이아웃 공유 란? 서로 다른 애니메이션 효과를 자연스럽게 이어지도록 하는 방법이다. 1. Layout Animation ( CSS 변경을 통한 자동 애니메이션 적용 ) Layout에 prop을 사용한 애니메이션 적용 방법 Layout prop이란? element에게 prop을 주어 CSS를 변경하게되면, 해당 element는 Layout이 바뀔 때 애니메이션 효과가 발생한다. ( CSS 때문에 Layout이 바뀐다면 저절로 애니메이션 효과가 이루어진다. ) function App() { const [clicked, setClicked] = useSta..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 AnimatePresence AnimatePresence 란? elemet가 나타나거나 사라질 경우 애니메이션 효과 발생시키는 컴포넌트이다. 자연스러운 show / hide의 애니메이션 효과를 부여한다. * AnimatePresence의 규칙 * 1. visible상태여야 한다. 2.내부에는 조건문이 있어야 한다. 1. AnimatePresence를 사용한 Show / Hide 구현 import { motion, AnimatePresence } from "framer-motion"; import { useState } from "react"; import styled from "styled-c..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 1. useScroll Hook을 사용한 Scroll에 따른 애니메이션 효과 적용 useScroll Hook은 Scroll에 대한 좌표값을 얻는다. import { useScroll } from "framer-motion"; const { scrollY, scrollYProgress } = useScroll(); useEffect(() => { scrollY.onChange(() => { console.log(scrollY.get(), scrollYProgress.get()); }); }, [scrollY, scrollYProgress]); scrollY : 픽셀 단위 수직 스크롤 값 scro..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 1. Drag 효과 const boxVariants = { hover: { scale: 1.5, rotateZ: 90 }, click: { scale: 1, borderRadius: "100px" }, // 색상을 줄때 string형(blue 등)으로 주면 animate가 안된다. rgb값을 넣어야 한다. drag: { backgroundColor: "rgb(46,204,113)", transition: { duration: 3 } }, }; function App() { return ( ); } export default App; whileHover : 마우스를 올려놓았을 때 whileTap..

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 영역 안에서 실제 ..

React를 위한 상태 관리 라이브러리이다. * 공식 문서 https://recoiljs.org/ko/docs/introduction/getting-started/ * Git Source Code https://github.com/kangilbin/React.js/tree/master/Recoil 1. 사용방법 // 패키지 설치 npm install recoil import React from "react"; import { RecoilRoot } from "recoil"; import App from "./App"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( ); 컴포넌트로..

리액트에서 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..