AnimatePresence컴포넌트가 사라질 때도 애니메이션을 실행하게 해주는 Framer Motion 컴포넌트 function MyComponent({ isVisible }) { return ( {isVisible && ( 🔥 )} );} ex. modal더보기const boxVariants = { initial : {scale: 0.5, opacity: 0}, animate : {scale: 1, opacity: 1}, exit : {scale: 0.5, opacity: 0},}function App() { const [isOpen,setIsOpen] = useState(false); const togg..

React 전용 고성능 애니메이션 라이브러리 https://motion.dev/ Motion (prev Framer Motion) — Animation made simple for React, JS and VueA fast and light animation library for React, JS and Vue. Powerful AI and VS Code developer tools. Motion uses browser APIs for a tiny filesize and superfast performance.motion.dev 설치npm install motion 사용 motion. 붙여야 함styled-components : const Box = styled(motion.div)``; Variant..

React에서 드래그 앤 드롭 기능을 구현하기 위한 라이브러리 https://github.com/atlassian/react-beautiful-dnd?tab=readme-ov-file GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with ReactBeautiful and accessible drag and drop for lists with React - atlassian/react-beautiful-dndgithub.com 설치npm install react-beautiful-dnd @types/react-beautiful-dnd DragDropContext 드래그 앤 드롭의 컨텍스트를 설..

React 내 Form을 간단하고 효율적으로 관리하도록 도와주는 라이브러리 https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-hook-form.com 특징간편한 유효성 검사, 리렌더링 최소화로 빠른성능, Controlled와 Uncontrolled 컴포넌트를 모두 지원, 기존 HTML 폼 활용 * Controlled vs Uncontrolled Components더보기Controlled ComponentsReact 상태(useState)를 통해 폼 값을..

전역 상태 관리위한 라이브러리로, React 상태를 쉽게 관리하고 효율적으로 업데이트함 my. context랑 뭐가 다르지,,? RecoilContext목적상태 관리 (비동기,상태독립 등 유용)데이터 전달렌더링변경 시 구독한 컴포넌트만 리렌더링변경 시 구독하는 모든 컴포넌트 리렌더링비동기 상태selector에서 비동기 로직 처리 가능추가 훅,로직 필요 AtomRecoil의 전역 상태 관리 단위로 상태 정의( ≒ 전역 사용 가능한 State)import { atom } from 'recoil';export const numState = atom({ key: 'numState', // 전역에서 고유해야 함 default: 0, // 초기값});Atom 생성 시 고유한 key와 초기값(..

웹 애플리케이션에서 동적 차트를 생성할 수 있는 라이브러리유형 참고 : https://apexcharts.com/react-chart-demos/설치React와 함께 사용npm install --save react-apexcharts apexcharts importimport ReactApexChart from "react-apexcharts";import { ApexOptions } from "apexcharts"; // 타입 가져오기 props‣ type: 차트유형 (String) ( 기본값 line )line, area, bar, pie, donut, radialBar, scatter, bubble, heatmap, candlestick, boxPlot, radar, polarArea, range..

React HelmetReact 애플리케이션에서 HTML 태그의 내용을 동적으로 관리할 수 있도록 도와주는 라이브러리 설치npm install react-helmet-async 사용-App.tsximport { HelmetProvider } from 'react-helmet-async'; import { Helmet } from 'react-helmet-async';function Home() { return ( 안녕하세요 홈 화면 );} React Iconshttps://react-icons.github.io/react-icons/ React Icons react-icons.github.io 설치 npm install react-icon..

데이터를 가져오고, 캐싱, 동기화, 업데이트를 효율적으로 관리하기 위한 React 라이브러리주로 API통신 간소화, 상태 관리 더 효율적으로 처리하기 위해 사용 특징데이터 캐싱 : 데이터 자동 캐싱해 동일한 데이터를 다시 요청할 필요 없이 즉시 사용 가능자동 리페치: 오래 되었거나, 다시연결 시 자동으로 데이터를 다시 가져와 동기화백그라운드 데이터 업데이트: 사용자가 애플리케이션을 사용하는 동안 데이터를 비동기적으로 업데이트변경 관찰 및 재시도: API 요청 실패 시 재시도 로직을 내장하고 있으며, 상태 변경을 실시간으로 감지 가능개별 요청 상태 관리: 요청 단위로 로딩, 에러, 성공 상태를 관리 가능 설치npm install @tanstack/react-query  기본QueryClient, Query..

배웠던 Typescript을 React에 적용해보자*Typescript 모른다면 -> https://bbbpp.tistory.com/category/TypeScript*설치 -> https://bbbpp.tistory.com/163 컴포넌트의 Props 타입정의//Square.tsxconst SquItem = styled.div` height: 100px; width: 100px;`function Square() { return( );}//App.tsxfunction App() { return ( {/* TypeScript가 Props 타입 몰라 오류*/} );} TypeScript에 Square컴포넌트의..

useMemo 값의 연산 결과를 Memoization하여, 불필요한 재계산을 방지하는 훅 * Memoization?동일한 값을 리턴하는 함수를 반복적 호출할 경우맨 처음 계산 할때 메모리에 저장해뒀다 필요할때마다 다시 계산이 아니라 메모리에서 꺼내 재사용하는것 왜 필요한가?함수형 컴포넌트도 함수.함수형 컴포넌트 렌더링 ->  컴포넌트 함수 호출 -> 내부 모든 변수 초기화만약 state 와 props의 변화로 인해 수많은 렌더링을 거친다면 렌더링 될때마다 변수가 초기화가 됨function calculate(){ return 1}function MyComponent(){ const value = calculate(); return {value}} 렌더링 마다 value 변수 초기화, cal..