JS7 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. 비동기 처리 in JS (Feat. React suspense) 비동기 프로그래밍 in 자바스크립트 먼저 동기와 비동기의 차이점부터 알아보고 갈 필요가 있다. 아래 그림은 이 둘의 개념의 차이를 그림으로 표현한 예이다. 동기는 어떠한 작업이 끝나고 나서 다음 작업을 시행하는 것이고, 비동기는 어떠한 작업의 종료 유무와는 상관 없이 다른 작업을 수행 할 수 있는 것이 개념적인 동기와 비동기의 차이점이라 할 수 있다. 그렇다면 자바스크립트에서는 이러한 비동기 작업을 어떻게 다루고, 그 과정에서 자바스크립트의 동작 과정을 살펴보자. 기본적으로 자바스크립트는 비동기적으로 동작한다. 이 말을 이해하려면, 자바스크립트의 동작 과정을 알아야한다.자바스크립트는 싱글스레드 언어이다. 이 말의 뜻은 처리할 논리적인 주체가 하나인 것을 의미한다. 그런데 어떻게 자바스크립트는 비동기 작업.. 2022. 5. 24. 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. 이전 1 2 다음
