tracking map 썸네일형 리스트형 React 18 useDeferredValue로 성능 최적화하기 프로젝트: tracking map 키워드: react v18, useDeferredValue, interruptible rendering, rendering blocking 상황 react 18에서 새로 나온 useDeferredValue hook을 사용해보고 장점을 알아본다. 실제 프로젝트에 적용하여 렌더링 성능 최적화를 확인한다. 해결 과정 1 먼저 useDeferredValue hook을 체험해보기 위해 간단한 코드를 작성한다. 아래 코드는 input element에 value를 입력할 때마다, boxes를 새로 연산하여 렌더링하는 코드이다. // Test.tsx import React, { useState, useDeferredValue, useMemo } from 'react'; function.. 더보기 Web Worker로 setTimeout을 백그라운드에서 유지하기 프로젝트: tracking map(유동인구분석 지도) 키워드: web worker, setTimeout, inactive tabs 상황 setTimeout으로 특정 delay 시간 이후 동작해야하는 코드가 있다. 탭을 유지할 때는 버그가 일어나지 않지만, 다른 탭으로 이동(현재 탭은 비활성화)했다가 돌아오면 원하는 타이밍보다 훨씬 늦게 setTimeout이 실행되는 버그가 있다. 해결방법 setTimout이 의도와 다르게 동작하는 것은 브라우저의 정책 때문이다. https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#reasons_for_delays_longer_than_specified 부하를 줄이기 위해서 탭이 inactive 될 때 delay 시간.. 더보기 이전 1 다음
