반응형
※ 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>
</>
);
}
'IT > React' 카테고리의 다른 글
[React] React 18 버전에서의 Suspense (0) | 2023.08.02 |
---|---|
[React] React 18 버전에서의 SSR 작업 흐름 (0) | 2023.08.02 |
[React] Automatic Batching 17 버전 vs Automatic Batching 18 버전 차이 (0) | 2023.08.02 |
[React] addEventListener를 쓸 때 주의 할 점 (0) | 2023.07.31 |
[React] promise.all , promise.race 정리 (0) | 2023.07.24 |