React/Library

[ React ] framer-motion

🔴 Introduction ⚪ React에서 컴포넌트 animation을 도와주는 라이브러리 🟠 Official Production-Ready Animation Library for React | Framer Motion Framer Motion is a production-ready React animation and gesture library. www.framer.com 🟡 Install npm i framer-motion 🔵 Reference GitHub - windragon0807/framer-motion-examples: 여러 가지 framer-motion 요소들을 컴포넌트별로 경험해 볼 수 있 여러 가지 framer-motion 요소들을 컴포넌트별로 경험해 볼 수 있는 Application ..

[ React ] react-beautiful-dnd

🔴 Introduction ⚪ Drag and Drop을 쉽게 해결해주는 오픈 소스 라이브러리 🟠 Official GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React Beautiful and accessible drag and drop for lists with React - GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React github.com 🟡 Install // react version >= 18.0.0 npm i react-beautiful-dn..

[ React ] react-hook-form

🔴 Introduction ⚪ form의 validation을 도와주는 라이브러리 🟠 Official 시작하기 Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com 🟡 Install npm i react-hook-form 🟢 Usage import "./styles.css"; import { useForm } from "react-hook-form"; export default function App() { const { register, // input에 react-hook-form 등록 handleSubmit, // register에 등록된 input 데이터를 form에서 처리할 함수 form..

[ React ] classnames

🔴 Introduction ⚪ html에서는 class를 사용하여 편하게 css를 쓸수 있지만 React에서는 class가 예약어로 사용중이기 때문에 이를 해결하기 위해 나온 라이브러리 🟠 Official classnames A simple utility for conditionally joining classNames together. Latest version: 2.3.1, last published: a year ago. Start using classnames in your project by running `npm i classnames`. There are 35414 other projects in the npm registry using classnames. www.npmjs.com 🟡 In..

[ React ] redux

🔴 Introduction ⚪ 자바스크립트 상태관리 라이브러리 🟠 Official Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org 🟡 Install npm i redux react-redux npm i @reduxjs/toolkit npm i redux-logger npm i redux-thunk 🟢 Usage // [ index.jsx ] import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import { Provider } from "react-redux"; import store from "./store/store..

[ React ] react-router-dom

🔴 Introduction ⚪ 리액트 SPA 구조에서 페이지를 이동하도록 도와주는 라이브러리 🟠 Official Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com 🟡 Install npm i react-router-dom 🟢 Usage // [ Router ] import { BrowserRouter, Rout..

[ React ] react-helmet

🔴 Introduction ⚪ React에서 웹사이트 을 동적으로 변경할 수 있도록 해준다. 🟠 Official GitHub - nfl/react-helmet: A document head manager for React A document head manager for React. Contribute to nfl/react-helmet development by creating an account on GitHub. github.com 🟡 Install npm i react-helmet 🟢 Usage // [ Usage Component ] import { Helmet } from "react-helmet"; const Coin = () => { return ( {state?.name ? state.n..

[ React ] recoil

🔴 Introduction ⚪ 메타가 출시한 리액트 상태관리 라이브러리 ⚪ 2개 이상의 자손 컴포넌트로 상태를 전달할 때 유용하다 🟠 Official 설치 | Recoil NPM recoiljs.org 🟡 Install react i recoil 🟢 Usage ⚪ default // [ index.tsx ] import { RecoilRoot } from "recoil"; const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); root.render( ); // [ atoms.ts ] : 상태 관리 store import { atom } from "recoil"; export const isDarkAtom = ato..

[ React ] apexchart

🔴 Introduction ⚪ React 뿐만 아니라, Vanilla js, Angular, Vue 프레임워크에서 지원되는 Chart를 그리는 라이브러리 🟠 Official Installation & Getting Started – ApexCharts.js Integrating ApexCharts is as simple as it can get with extensive API docs and 100+ samples ready to be used. Check out all the options of ApexCharts apexcharts.com 🟡 Install npm i react-apexcharts apexcharts 🟢 Usage // [ Usage Component ] import ApexChar..

[ React ] @tanstack/react-query

🔴 Introduction ⚪ 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리 🟠 Official TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com 🟡 Install npm i @tanstack/react-query 🟢 Usage // [ index.tsx ] import { QueryClient, QueryClientProvider } ..