가수면

const queryClient = useQueryClient(); const { data: user } = useQuery(queryKeys.user, () => getUser(user)); 유저 정보를 가져오려고 할 때 useQuery로 불러오려고 하면 애초에 유저가 정의되지 않았기에 못 가져옴 function updateUser(newUser: User): void { queryClient.setQueryData(queryKeys.user, newUser); } 쿼리 클라이언트(캐시)에 로그인할 때 받아온 user 값을 저장해줌 function clearUser() { queryClient.setQueryData(queryKeys.user, null); } 로그아웃 시 클라이언트(캐시)에서 유저 키..

const initialUrl = "https://swapi.dev/api/people/"; const fetchUrl = async (url) => { const response = await fetch(url); return response.json(); }; . . . const { data, fetchNextPage, hasNextPage, isLoading, isFetching, isError, error } = useInfiniteQuery( ["sw-people"], ({ pageParam = initialUrl }) => fetchUrl(pageParam), { getNextPageParam: (lastPage) => lastPage.next || undefined, // hasNextPa..

설치 npm install recoil 기본 1. index에 RecoilRoot import하기 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); root.render( ); 2. atoms.ts파일 생성 3. 데이터 설정하기 //const todos = useRecoilValue(todoState); (불러오고 싶을 때) //const setTodos = useSetRecoilState(todoState); (가공하고 싶은 때) //위의 두 개를 아래처럼 합칠 수 있음 const [todos, setTodos] = useRecoilState(todoState); selector 리덕스의 slice같은 기능..

설치 npm i react-helmet npm i --save-dev @types/react-helmet import { Helmet } from "react-helmet"; . . . return ( 쓰고싶은 말 파비콘 설정도 가능함

설치 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 (..

대가리 깨지는 줄 알았다... import { useCallback, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import styled from "styled-components" import { __holiday } from "../../redux/modules/loginSlice"; const Calendar = () => { // 사용할 날짜들 상수로 선언 const today = { year: new Date().getFullYear(), month: new Date().getMonth() + 1, date: new Date().getDate(), }; // 리덕스 툴킷으로 ..

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 && ⚠이메일 형식에 맞지 않습니다.} 비..

useEffect(() => { document.body.style= `overflow: hidden`; return () => document.body.style = `overflow: auto` }, [])

컴포넌트화 (필수x) import { Cookies } from "react-cookie" const cookies = new Cookies() export const setCookie = (name: string, value: string, option?: any) => { return cookies.set(name, value, { ...option }) } export const getCookie = (name: string) => { return cookies.get(name) } 컴포넌트화 안 할 경우 쿠키에 저장 컴포넌트화 했을 경우 const jwtToken = await signIn(signInPayload) if (jwtToken) { setCookie('myToken', token, {..

form양식 제출하면 입력된 값을 제출 1. useRef 작성 const AuthForm = () => { const emailInputRef = useRef() const passwordInputRef = useRef() 2. 값을 내보낼 input창에 ref 적용 이메일 비밀번호 3. submitHandler 작성 const submitHandler = (event) => { event.preventDefault() const enteredEmail = emailInputRef.current.value const enteredPassword = passwordInputRef.current.value }

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

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

예제 코드) input의 useState를 커스텀훅으로 만들어 대체해보기 // src/App.jsx import React from "react"; import { useState } from "react"; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(""); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useState(""); const onChangeBodyHandle..

Memo input창에 타이핑하면 그때마다 리렌더링 되는 것을 막아줌. // components/Button.js import React, { memo } from "react"; const Button = () => { console.log("리렌더링되고 있어요."); return 버튼; }; export default memo(Button); 그러나 Memo는 아래와 같이 함수를 props로 전달 받게 되면 다시 리렌더링되기 시작하는 한계가 있음 (useState의 변경으로 인해 App.js가 리렌더링되면서 App.js에 있는 함수, 배열이나 객체가 재실행, 재생성되기 때문에 그 값을 props로 부모로부터 넘겨받으면 당연히 리렌더링이 일어남) // components/Button.js import ..

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

코드를 요약하지 않고 정석적인 방법을 적음 useState를 이용해 true, false 값으로 모달창 여닫는 기능 만들어 줌 // 부모 컴포넌트 const Todo = (props) => { const [modalIsOpen, setMdalIsOpen] = useState(false) const deleteHandler = () => { setMdalIsOpen(true) } const closeModalHandler = () => { setMdalIsOpen(false) } . . . {modalIsOpen && } {modalIsOpen && } ) } export default Todo 자식 컴포넌트들 import React from 'react' const Modal = (props) => { ..