JS/React4 SPA Route 일반적으로 spa에서 라우팅 구현은 window history 객체에 있는 pushState로 구현한다. history 객체에서 주소창을 바꾸는 메소드는 replaceState, pushState 2가지가 존재한다. 차이점은 replaceState는 뒤로가기가 활성화 되지 않고 주소창이 말 그대로 replace되는 것이며, pushState는 스택처럼 history가 쌓이는 구조이다. 그래서 spa구조에서 실제 라우팅 되는 것처럼 구현을 하려면 pushState를 사용해야 한다. (location.replace 는 아예 새로 페이지를 그리는 것이기 때문에 불가) pushState(state, unused, url) 문법은 다음과 같다. 전달하고 싶은 상태값을 state에 넣어주고, 변경하길 원하는 주소값.. 2022. 10. 6. useQueryDebounce import { useState, useEffect } from 'react'; const useQueryDebounce = (value: string, delay = 200) => { const [debounceValue, setDebounceValue] = useState(value); useEffect(() => { const handler: NodeJS.Timeout = setTimeout(() => { setDebounceValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value, delay]); return debounceValue; }; export default useQueryDebounce; 2022. 9. 5. Closure로 useEffect hook 구현 const React = (function() { // 변경 let hooks = []; let idx = 0; function useState(initVal) { // 변경 const _idx = idx; const state = hooks[idx] || initVal; const setState = newVal => { // 변경 hooks[_idx] = newVal; }; idx++; return [state, setState]; } function render(Component) { idx = 0; const C = Component(); C.render(); return C; } return { useState, render }; })(); function Component() { const [.. 2021. 12. 27. React Lazy Loading - 초기 번들 load 시 속도 개선을 위해 번들을 나눠서 가져온다. //route.js import React from "react"; const IntroPage = React.lazy(() => import("pages/intro")); const RegistSuccessPage = React.lazy(() => import("pages/registSuccess")); //... const routes = [ { name: "influencer regist page", path: "/influencer/black", component: InfluencerBlackPage, }, { name: "influencer regist page", path: "/influencer/candidate", com.. 2021. 12. 22. 이전 1 다음