안녕하세요

Lazy Load 기능으로 import하기 특징 사이트를 발행할 때 하나의 js 파일로 생성되지 않고 별도의 파일로 분리되게 됩니다. 그러면 Datail 컴포넌트가 필요할 때가 되어야 로딩을 시작을 하게 되고 => 모든 페이지를 한 번에 로딩하지 않도록 하여 최초 로딩 시간을 줄여줍니다. 사용 방법 아래와 같은 형태로 컴포넌트를 import를 하여 페이지를 Lazy Load 할 수 있습니다. const Datail = lazy(() => import("./components/Detail.js")); 로딩중이라는 UI를 나타내려면 아래와 같이 로 감싸주면 됩니다. ;

React Query 실시간 sns, 코인 거래소와 같은 기능 구현시 유용함 장점 1. ajax 성공/실패에 따른 결과를 렌더링하기 쉽다. 2. 실패한 경우 지정한 시간 후에 재시도 요청을 자동으로 해준다. 3. prefetch 다음 페이지를 미리 요청하여 캐시에 담아두어 곧바로 렌더링 할 수 있도록 한다. $ 설치 1. 라이브러리 설치 $ npm install react-query 2. index.js에서 QueryClient를 생성하고 const queryClient = new QueryClient(); 3. 로 감싸기 react-query로 데이터 요청하기 const requestResult = useQuery( "작명", () => axios.get("url").then((resolve) => {..

로컬스토리지 로컬스토리지는 재접속 해도 브라우저에 남아있다. +세션스토리지는 브라우저를 끄면 휘발된다. 로컬스토리지 다루는 법 localStorage.setItem("key", "value") 키와 값 저장하기 localStorage.getItem("key") // "value" 값 가져오기 localStorage.removeItem("key") // undefined 키 삭제하기 array/object를 저장하려면 JSON으로 변환 let userData = { name: "Amy" }; userData = JSON.stringify(userData) let userJSONData = localStorage.getItem("userData"); console.log(userJSONData); // {"..

1. redux toolkit 설치하기 $ npm install @reduxjs/toolkit react-redux 2. redux toolkit 기본 세팅: Provider로 감싸기 index.js에서 로 감싸면 끝난다. Provider로 감싸면 state 냉장고 완성 여기서 전달할 store props는 아래(3)의 store.js 파일이다. 3. redux toolkit 기본 세팅: 스테이트 만들기 store.js 파일을 만들어 아래와 같이 생성하게 된다. import { configureStore, createSlice } from "@reduxjs/toolkit"; 1. 아래와 같이 생성한다 const 변수명 = createSlice({ name: "state를 알기 쉬운 아무이름", initi..