React 성능 최적화 훅 useDeferredValue

성능 최적화 훅인 useDeferredValue는 useTransition와 마찬가지로 그래픽 인터페이스의 작동 속도를 높이는 데 도움을 주지만, 약간 다른 방식으로 작동합니다.

이전 강의를 살펴보고 useTransition의 경우 어떻게 상태 업데이트 함수 setFilterTerm를 감쌌는지 확인해 보세요. 하지만, 상태 업데이트 코드가 항상 접근 가능한 것은 아닙니다. 예를 들어, 연결한 라이브러리 내에 숨겨져 있을 수 있습니다. 이럴 때는 useDeferredValue 훅을 사용할 수 있습니다. 이 경우 상태 자체나 해당 상태를 사용해 계산된 결과를 감싸서 우선순위를 낮춰야 합니다.

자식 컴포넌트 ProductList의 다음 코드 조각을 분석해 보겠습니다:

import {useDeferredValue} from 'react'

function ProductList({ products }) {
	const deferredProducts = useDeferredValue(products);
	
	return (
		<ul>
			{deferredProducts.map((product) => (
				<li>{product}</li>
			))}
		</ul>
	);
}

여기서는 컴포넌트의 props에서 가져온 변수 products 자체를 useDeferredValue로 감쌌다는 점에 주의하세요. 그 결과를 deferredProducts에 저장하여 앞으로 작업하게 됩니다:

const deferredProducts = useDeferredValue(products);

이제, 지난 강의에서 살펴본 메인 컴포넌트의 코드 조각에서 다음 줄을 제거한다고 가정해 보겠습니다:

const [isPending, startTransition] = useTransition();

그리고 isPending을 사용하는 줄도 제거합니다:

{isPending && <p>업데이트 중 ...</p>}

또한 setFilterTerm 함수를 감싼 래퍼도 제거하면, 지난 강의와 동일한 결과를 얻을 수 있습니다:

function updateFilterHandler(event) {
	setFilterTerm(event.target.value);
}