jonbeo 님의 블로그

안녕하세요 😊React에서 검색 기능이나 필터링 기능을 만들다 보면, 입력할 때마다 화면이 순간적으로 버벅거리는 경험을 하신 적 있으실 겁니다.특히 데이터가 많거나 무거운 연산을 수행할 경우, 사용자가 타이핑하는 속도를 UI가 따라가지 못해 불편해질 수 있습니다. 이때 React가 제공하는 useDeferredValue Hook을 사용하면 문제를 쉽게 해결할 수 있습니다.📍 1. useDeferredValue란?useDeferredValue는 값 업데이트를 지연 처리하여, 사용자 인터랙션(입력)은 바로 반영되지만 무거운 연산은 조금 늦게 처리되도록 도와주는 Hook입니다.즉, UI 우선 / 연산 지연이라는 전략을 통해 UX를 개선합니다.📍 2. 기본 사용법 import { useState, useD..

안녕하세요 😊웹 개발을 하다 보면 scroll, resize, input 같은 이벤트가 너무 자주 실행되어 성능 저하를 일으키는 경우가 많습니다.예를 들어, 사용자가 검색창에 글자를 입력할 때마다 서버로 API 요청이 간다면 불필요한 요청이 수십 번 발생하겠죠? 이 문제를 해결하는 대표적인 기법이 바로 Debounce와 Throttle입니다.📍 1. Debounce – 마지막 동작만 실행Debounce는 사용자의 연속된 입력 중에서 마지막 동작만 실행되도록 하는 방법입니다. 예시: 검색창 자동완성 function debounce(fn, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeo..