react suspense (3) 썸네일형 리스트형 useTransition : suspend pending 상태 시간 조작 주의 : 해당 내용은 실제로 적용 불가능한 내용임. 문제를 어떤 방식으로 해결하는지에만 집중하자. Disable timeoutMs argument by acdlite · Pull Request #19703 · facebook/react (github.com) 너무 빨라서 로딩 상태가 안보이는것도 일관성이 없어 좋지 않은 사용자 경험을 줄 수 있음. 이것을 "flash of loading content" 라 함 해당 문제를 개선해보자 아래와 같이 설정 객체를 만든다. const SUSPENSE_CONFIG = { timeoutMs: 4000, // 4초 이상 걸리면 pending state표시 busyDelayMs: 300, // css전환을 위해 최소 시간 예약해둠 busyMinDurationMs: 70.. useTransition : fallback 컴포넌트 보여주는 시간 조절 주의 : 해당 내용은 실제로 적용 불가능한 내용임. 문제를 어떤 방식으로 해결하는지에만 집중하자. Disable timeoutMs argument by acdlite · Pull Request #19703 · facebook/react (github.com) 너무 빨라서 로딩 상태가 안보이는것도 일관성이 없어 좋지 않은 사용자 경험을 줄 수 있음. 이것을 "flash of loading content" 라 함 해당 문제를 개선해보자 아래와 같이 설정 객체를 만든다. const SUSPENSE_CONFIG = { timeoutMs: 4000, // 4초 이상 걸리면 pending state표시 busyDelayMs: 300, // css전환을 위해 최소 시간 예약해둠 busyMinDurationMs: 70.. Simple Data-Fetching with React Suspense 1. 기본 아이디어 1.1 : 비동기로 데이터 호출 시, 데이터가 있으면 리턴하고, 없으면 promise를 throw한다. function createResource(promise) { let status = 'pending' let result = promise.then( resolved => { status = 'success' result = resolved }, rejected => { status = 'error' result = rejected }, ) return { read() { if (status === 'pending') throw result if (status === 'error') throw result if (status === 'success') return result th.. 이전 1 다음
