전체 글

[ 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 ] Modal

🔴 Introduction ⚪ 어느 위치에서나 사용할 수 있는 모달창을 만드는 구조 🟠 Usage 📄 public/index.html 📄 index.jsx import React from "react"; import ReactDOM from "react-dom/client"; import { Provider } from "react-redux"; import store from "./store"; import App from "./App"; import Modal from "./Modal"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 📄 store.js import { configureStore } ..

[ 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 } ..

[ React ] axios

🔴 Introduction ⚪ 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 🟠 Official 시작하기 | Axios Docs 시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코 axios-http.com 🟡 Install npm i axios 🟢 Usage import axios from "axios"; const BASE_URL = `https://api.coinpaprika.com/v1`; export const fetchCoins = async () => { ..