가수면

설치 npm install --save react-apexcharts apexcharts //import ApexChart from "apexcharts"; 와 헷갈리지 않도록 주의 import ReactApexChart from "react-apexcharts"; 사용법 price.close) ?? [], }, ]} options={{ theme: { mode: "dark", }, . . . series => 사용하고자 하는 데이터 DEMOS의 데이터를 사용하거나 options 참조

async function deletePost(postId) { const response = await fetch(`https://jsonplaceholder.typicode.com/postId/${postId}`, { method: "DELETE" }); return response.json(); } const { data, isLoading, isError } = useQuery(["comments", post.id], () => fetchComments(post.id)); // useMutation const deleteMutation = useMutation((postId) => { deletePost(postId); }); const updateMutation = useMutation(() =..

isFetching 비동기 작업 처리 중 isLoding isFetching 중이고 표시할 데이터도 없는 상태 (리액트 쿼리에선 만든 적이 없다는 의미이기도 함) 단, stale인 상태일 때가 아닌 데이터가 최신 상태일 때(staleTime이 만료되지 않았을 때)는 isFetching 이 표시되지 않음

설치 npm i @tanstack/react-query npm i @tanstack/react-query-devtools QueryClient와 QueryClientProvider 추가 (ReactQueryDevtools은 선택 사항) import { Posts } from "./Posts"; import "./App.css"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; // 추가 const queryClient = new QueryClient(); function App() { return (..

npm install react-hook-form 기본 import React from "react"; import { useForm } from "react-hook-form"; import styled from "styled-components"; const Login = () => { const { register,// input창 상태관리 handleSubmit,//form 함수 formState: { errors },// 유효성 파트 } = useForm(); const onSubmit = (data) => console.log(data); // console.log 대신 디스패치 들어가면 됨 return ( 이메일 {errors?.email?.type && ⚠이메일 형식에 맞지 않습니다.} 비..

기존 컴포넌트 재활용 타입만 변경 속성 재정의 디폴트 값 객체로 설정할 때 사용법 애니메이션 스타일 컴포넌트에 조건주기

Styled Components는 createGlobalStyle()라는 함수를 제공하고 있다. 사용법은 아래와 같다. import { createGlobalStyle } from 'styled-components' const GlobalStyle = createGlobalStyle` html { font-size: 100%; } body { background-color: #eee8aa; } ` export default GlobalStyle 작성한 전역 스타일 컴포넌트를 애플리케이션의 최상위 컴포넌트에 추가해주면 하위 모든 컴포넌트에 해당 스타일이 일괄 적용된다. // App.jsx import GlobalStyle from "./GlobalStyle"; import Router from './com..

thunk 미들 웨어 비동기 처리. dispatch 를 할 때 객체가 아닌 함수를 dispatch할 수 있게 해줌. thunk 사용하기 간단한 예제) // src/redux/modules/counterSlice.js import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; export const __addNumber = createAsyncThunk( // 첫번째 인자 : action value "addNumber", // 두번째 인자 : 콜백함수 (payload, thunkAPI) => { setTimeout(() => { thunkAPI.dispatch(addNumber(payload)); }, 3000); } ); 이후 App.js의 액션..

redux toolkit 설치 yarn add react-redux @reduxjs/toolkit 순서 1. modules 작성 // src/redux/modules/counterSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { number: 0, }; const counterSlice = createSlice({ name: "counter", //모듈의 이름 initialState, reducers: { addNumber: (state, action) => { state.number = state.number + action.payload; }, minusNumber: (state, action) => { st..

패키지 설치 yarn add react-router-dom 폴더 구성 라우터 설정 Router.js 대문자로 넣었어도 주소는 소문자로도 먹힘 import React from "react"; // 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다. import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "../Pages/Home"; import About from "../Pages/About"; import Contact from "../Pages/Contact"; import Works from "../Pages/Works"; // 2. Router 라는 함수를 만들고 아래와..

준비물 'styled-components' 플러그인 styled-components 설치하기( yarn add styled-components ) 스타일 컴포넌트 적용하기 // src/App.js import React from "react"; import styled from "styled-components"; // 1. styled-components를 만들었습니다. const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; // 4.부모 컴포넌트에서 보낸 props를 받아 사용합니다. margin: 20px; `; const App = () => { return ( /..

리덕스 설치 yarn add redux react-redux 데브툴 설치 npm install redux-devtools-extension // 저장소에 추가해야할 것 import { composeWithDevTools } from "redux-devtools-extension"; const store = createStore(rootReducer, composeWithDevTools()); 리덕스 기본 폴더 구성 초기값, reducer 설정 (modules 폴더) // src/modules/counter.js // 초기 상태값 (useState와 비슷한 역할) // 객체 형태가 아니어도 됨. const initialState = { number: 0, }; // 리듀서 (setState와 비슷한 역할)..