보류 중인 UI를 위한 useTransition(동시성 기초)

목표: 처리 비용이 큰 UI 업데이트가 나중에 실행되는 동안에도 입력은 즉각적으로 반응하도록 하세요.

• 긴급하지 않은 작업을 전환으로 표시하세요
• isPending 피드백을 보여 주세요
• 처리 비용이 큰 렌더링으로 메인 스레드를 차단하지 마세요

다음과 같은 경우 useTransition을 사용하세요:

• 긴 목록을 필터링할 때
• 처리 비용이 큰 UI가 있는 경로나 탭을 전환할 때
• 입력 후 처리 비용이 큰 파생 화면을 표시할 때

전환을 사용하지 않으면 React가 UI를 다시 계산하는 동안 큰 목록을 필터링할 때 지연이 느껴질 수 있습니다.

처리 비용이 큰 상태 업데이트를 startTransition으로 감싸세요. 입력은 부드럽게 유지되고, isPending이 피드백을 보여 줍니다.

• 긴급: 사용자 입력, 작은 강조 표시 → 즉시 업데이트
• 긴급하지 않음: 큰 목록, 처리 비용이 큰 계산 → startTransition으로 감싸기
• 미묘한 피드백에는 isPending 사용

참고:

• 전환은 느린 코드를 빠르게 만들지 않습니다. 작업을 더 나은 방식으로 예약할 뿐입니다.
• 파생 작업은 계속 메모이제이션하세요.
• 실제 병목 지점을 찾으려면 여전히 프로파일링해야 합니다.

요약: 긴급한 입력과 처리 비용이 큰 UI 업데이트를 분리하세요. 긴급하지 않은 작업을 startTransition으로 감싸고 결과가 업데이트되는 동안 isPending을 표시하세요.