Next.js: React 기반의 서버 사이드 렌더링(SSR)과 정적 사이트 생성을 지원하는 풀스택 웹 프레임워크 -공식사이트https://nextjs.org/ Next.js by Vercel - The React FrameworkNext.js by Vercel is the full-stack React framework for the web.nextjs.org 왜써야하나? 주요 특징1. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 지원클라이언트 측 렌더링(CSR)만 지원하는 React의 한계를 넘어,Next.js는 서버에서 미리 HTML을 생성해 빠른 초기 로딩과 SEO(검색 엔진 최적화)에 최적화SSR (Server Side Rendering)사용자의 요청 시 서버에서 HTML을 생성하..

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)를 통해 폼 값을..

이름이 있는 상수 집합을 정의한 데이터 구조- 여러 관련된 값을 하나의 그룹으로 묶어 관리 가능- 열거형 이름(key)과 값(value)으로 이루어짐여러상수 편리하게 정의할때 유용(+타입안전)종류숫자 열거형자동 할당enum Dir { Up, // 0 Down, // 1 Left, // 2 Right, // 3}명시적 값 지정, 이후 값 자동 증가enum Dir { Up =1 , Down, // 2 Left, // 3 Right, // 4}console.log(Dir.Left); //3console.log(Dir[3]); // "Left" 값으로 이름 찾기도 가능 문자열 열거형enum Dir { Up = "UP", Dow..

전역 상태 관리위한 라이브러리로, 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..