⚛️ React 18 성능 최적화: startTransition vs useDeferredValue 완벽 비교
동시성 모드(Concurrent Mode)를 지배하는 두 가지 무기를 언제 어떻게 써야 할까요?
React 18이 등장하면서 프론트엔드 생태계에는
'동시성(Concurrency)'이라는 거대한 파도가
밀려왔습니다.
과거에는 무거운 렌더링 작업이 발생하면 화면이 버벅거리거나 사용자의 입력이
씹히는 현상이 발생하곤 했습니다.
이 문제를 해결하기 위해 등장한 것이 바로 startTransition과
useDeferredValue입니다.
하지만 많은 개발자분이 이 두 가지 API의 역할이 비슷해 보여
혼란스러워하십니다.
🤔 핵심 의문
"둘 다 렌더링 우선순위를 낮추는 것 같은데, 도대체 무슨 차이가 있는
거지?"
"내 검색 컴포넌트에는 어떤 훅을 적용해야 성능이 좋아질까?"
오늘 이 글을 통해 두 API의 명확한 차이점과 실무 사용 기준을 완벽하게
정리해 드리겠습니다.
더 이상 헷갈리지 마시고, 여러분의 애플리케이션 성능을 극대화해보세요.
🚀 1. startTransition: 상태 업데이트의 주도권
startTransition은
상태 업데이트(State Update)의 우선순위를 개발자가 직접
제어하고 싶을 때 사용합니다.
쉽게 말해, "이 코드는 긴급하지 않으니, 다른 중요한 일(클릭, 타이핑 등)
먼저 처리하고 나중에 해!"라고 리액트에게 명령하는 것과 같습니다.
🛠 언제 사용하나요?
- ✅ 이벤트 핸들러 내부에서 상태를 업데이트할 때
- ✅ 페이지 이동이나 무거운 필터링 로직이 실행될 때
- ✅ 사용자의 입력에 즉각 반응해야 하는 UI가 막히지 않아야 할 때
// 사용 예시 코드
import { startTransition } from 'react';
const handleClick = () => {
// 1. 긴급한 업데이트 (즉시 반영)
setInputValue(input);
// 2. 긴급하지 않은 업데이트 (우선순위 낮음)
startTransition(() => {
setSearchQuery(input);
});
};
위 코드에서 setSearchQuery는 낮은 우선순위로 처리됩니다.
만약 사용자가 입력을 빠르게 반복한다면, 리액트는 이전의
setSearchQuery 작업을 취소하고 최신 작업만 처리하여 렌더링
부하를 줄입니다.
🐢 2. useDeferredValue: 값의 지연 처리
useDeferredValue는 상태 업데이트 함수를 감싸는 것이 아니라,
이미 변경된 값(Value)을 늦게 받아서 처리할 때
사용합니다.
마치 디바운스(Debounce)와 비슷해 보이지만, 고정된 지연 시간 없이 리액트가
렌더링 여유가 있을 때 값을 업데이트한다는 점에서 훨씬 스마트합니다.
🛠 언제 사용하나요?
- ✅ 부모 컴포넌트로부터 Props를 전달받아 처리할 때
- ✅ 상태 업데이트 함수(setState)에 직접 접근할 수 없을 때
- ✅ 외부 라이브러리에서 값을 받아올 때
이 훅은 새로운 값을 받으면 일단 이전 값을 유지하다가,
화면 렌더링이 완료되고 여유가 생기면 그때 새로운 값으로 업데이트합니다.
따라서 무거운 리스트를 렌더링할 때 사용자 입력이 끊기지 않게 해줍니다.
⚖️ 한눈에 보는 비교 (핵심 요약)
두 훅 모두 '긴급하지 않은 렌더링을 뒤로 미룬다'는 목적은
같지만, 사용하는 상황과 방식이 다릅니다.
아래 표를 통해 명확한 기준을 세워보세요.
| 구분 | startTransition | useDeferredValue |
|---|---|---|
| 제어 대상 | 상태 업데이트 함수 (Setter) | 값 (Value / Props) |
| 사용 위치 | 이벤트 핸들러 내부 | 컴포넌트 렌더링 로직 내부 |
| 작동 방식 | 코드를 래핑하여 우선순위 낮춤 | 값의 변경을 감지하여 지연 처리 |
| 추천 상황 | 내가 state를 직접 set 할 수 있을 때 | 부모에서 받은 props가 무거울 때 |
🎯 결론 및 실천 가이드
React 18의 동시성 기능은 사용자 경험(UX)을 획기적으로 개선할 수 있는
강력한 도구입니다.
하지만 무분별한 사용은 오히려 코드를 복잡하게 만들 수 있습니다.
📌 최종 요약 및 Action Plan
-
상태 업데이트에 접근 가능하다면? 👉
startTransition을 우선 고려하세요. -
props로 전달받은 값을 지연시켜야 한다면? 👉
useDeferredValue를 사용하세요. - 주의사항: 모든 상태에 적용하지 마세요. 화면 렌더링이 실제로 느릴 때만 최적화 수단으로 사용해야 합니다.
댓글 쓰기