[React] useTransition 정리

※ useTransition
  - 컴포넌트 렌더링시 연산의 우선순위를 둬서 좀 늦게 렌더링해도 될 것들을 지정
  - 기존에는 한번 렌더링 연산이 시작되면 중간에 멈출 수 없었음
  - 특정 핸들러함수에 의해서 화면을 재 연산해야 되는 경우 중간에 무거운 로직이 실행되는 연산이 있으면 나머지 연산도 같이 지연이 일어남

 

아래는 useTransition 예제 및 설명에 따른 주석 정리 입니다.

import { useState, useTransition } from 'react';

function App() {
	const [Count, setCount] = useState(0);
	const [Items, setItems] = useState([]);
	const [isPending, startTransition] = useTransition();
	//isPending에 넣어두면 늦게 실행 됨.

	console.log('isPending', isPending);

	//아래함수에서는 덜 중요하고 무거운 연산 때문에 급한 연산까지 덩달아 늦게 화면에 랜더링
	const handleClick = () => {
		//urgent op (급하게 처리되야될 중요한 연산)
		setCount(Count + 1);

		startTransition(() => {
			//not urgent op (우선순위가 떨어지는 덜 중요한 연산)
			const arr = Array(20000)
				.fill(1)
				.map((_, idx) => Count + idx);
			setItems(arr);
		});
	};

	//아래 버튼 클릭시 마다 만개의 배열 리스트가 출력되기 전까지는 버튼의 숫자값이 늦게 카운트 되는 것을 확인
	return (
		<>
			<div className='App'>     
        {/* disabled에 isPending을 넣어서 처리가 다 되지 않았을 경우 버튼 선택이 되지 않게 처리 */}
				<button onClick={handleClick} disabled={isPending}>
					{Count}
				</button>
			</div>

			<ul>
				{Items.map((num) => {
					return <li key={num}>{num}</li>;
				})}
			</ul>
		</>
	);
}