React의 성능 최적화 훅 useTransition

성능 최적화 훅 useTransition을 사용하면 UI를 차단하지 않고 상태(state)를 업데이트할 수 있습니다.

이 훅을 통해 특정 상태 업데이트에 낮은 우선순위를 부여할 수 있으며, 이렇게 하면 다른 상태 업데이트가 높은 우선순위를 가져 지연 없이 실행될 수 있습니다.

예를 들어, 사용자가 검색 입력란에 문자를 입력할 때 드롭다운 상품 목록의 필터링을 들 수 있습니다. 목록 자체는 약간의 지연과 함께 표시될 수 있지만, 검색 입력란에 문자가 지연되어 입력되는 것은 원하지 않을 것입니다.

이런 경우에 useTransition 훅이 어떻게 도움을 줄 수 있는지 살펴보겠습니다. 주요 컴포넌트의 코드 일부가 있다고 가정해 봅시다. 분석해 보겠습니다:

import { useTransition } from 'react';
import { useState } from 'react';

function App() {
	const [isPending, startTransition] = useTransition();
	const [filterTerm, setFilterTerm] = useState('');
  
	const filteredProducts = filterProducts(filterTerm);
  
	function updateFilterHandler(event) {
		startTransition(() => {
			setFilterTerm(event.target.value);
		});
	}
 
	return (
		<div>
			<input type="text" onChange={updateFilterHandler} />
			<ProductList products={filteredProducts} />
		</div>
	);
}

여기서 useTransition을 위한 두 가지 변수를 볼 수 있습니다. 변수 isPending은 부울 값을 포함하며 업데이트 프로세스가 완료되었는지 여부를 나타내고, startTransition은 업데이트 우선순위를 낮출 수 있게 해주는 함수입니다:

const [isPending, startTransition] = useTransition();

또한 입력란에 입력된 검색어를 저장하는 상태 filterTerm과 이를 설정하는 함수 setFilterTerm이 있습니다:

const [filterTerm, setFilterTerm] = useState('');

인풋에 문자를 입력할 때마다 함수 updateFilterHandler가 호출되며, 여기서 filterTerm의 업데이트가 발생합니다. 바로 여기서 useTransition 훅을 적용하며, 설정 함수 setFilterTerm을 다음과 같이 startTransition으로 래핑합니다:

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

이렇게 하여 상태 filterTerm의 업데이트에 낮은 우선순위를 설정했으며, 이로 인해 우리의 입력 필드는 반응성을 유지할 것입니다.

변수 isPending을 사용하여 목록 업데이트가 아직 진행 중임을 사용자에게 표시할 수 있습니다. 목록이 업데이트되는 동안 입력 필드 아래에 이 정보를 출력해 보겠습니다:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>업데이트 중 ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);