React useDeferredValue란? 느린 작업을 부드럽게 처리하는 Hook 사용법 완벽 정리

 

 

이번 글에서는 React의 성능 최적화 Hook 중 하나인
useDeferredValue에 대해 알아보겠습니다.

이 Hook은 사용자 입력과 같이 빠르게 바뀌는 값의 **"지연된 버전"**을 만들어
UI가 끊기지 않고 부드럽게 렌더링될 수 있도록 도와줍니다.

초보자 분들도 이해할 수 있도록 개념부터 사용법, 실전 예제까지 차근차근 설명드릴게요!

---

📍 1. useDeferredValue란?

useDeferredValue는
바로 반영하지 않고, 브라우저가 여유 있을 때 값 업데이트를 미루는 Hook입니다.

주로 입력이 빠르게 바뀌는데, 그걸 기반으로 무거운 연산을 해야 할 때 사용됩니다.

예: 검색창에 입력할 때마다 긴 리스트를 필터링해야 한다면
→ useDeferredValue로 부하를 줄일 수 있습니다.

---

📍 2. 기본 사용법

import { useState, useDeferredValue } from 'react';

function SearchComponent() {
  const [input, setInput] = useState('');
  const deferredInput = useDeferredValue(input);

  return (
    <>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <SearchResult query={deferredInput} />
    </>
  );
}

 

✔ 핵심 포인트

• input은 즉시 업데이트되지만
• deferredInput은 브라우저가 여유 있을 때 처리
  → 느린 연산이 붙은 컴포넌트에서는 deferredInput만 사용!

---

📍 3. 언제 사용하면 좋은가요?

• ✅ 빠르게 입력되는 값이 렌더링 성능에 영향을 줄 때
• ✅ 검색, 필터링, 정렬 등 비용이 큰 연산이 따라올 때
• ✅ 즉시 반응은 하되, 실제 렌더는 여유 있게 처리하고 싶을 때

---

📍 4. 실전 예제: 검색 필터에 적용하기

function FilterList({ query }) {
  const list = useMemo(() => {
    return bigData.filter(item => item.includes(query));
  }, [query]);

  return (
    <ul>
      {list.map((item, i) => <li key={i}>{item}</li>)}
    </ul>
  );
}

function App() {
  const [search, setSearch] = useState('');
  const deferredSearch = useDeferredValue(search);

  return (
    <>
      <input value={search} onChange={e => setSearch(e.target.value)} />
      <FilterList query={deferredSearch} />
    </>
  );
}

search 값은 실시간 입력되고,
FilterList는 부드럽게 느려진 검색어로 렌더링됨

---

📍 5. 주의할 점

• useDeferredValue는 UI를 늦추는 용도이지, 디바운스 기능은 아님
• 사용자의 빠른 입력 자체는 실시간으로 반영되지만
  그걸 사용하는 컴포넌트가 느리게 반응할 뿐입니다

---

✅ 마무리하며

useDeferredValue는 사용자의 경험을 부드럽게 만들 수 있는
성능 최적화용 Hook입니다.

특히 무거운 리스트 렌더링이나 검색 기능에 잘 활용된다면
앱의 반응 속도가 훨씬 좋아지며, 사용자 만족도도 높아집니다 😊