suspense (11) 썸네일형 리스트형 Render as you fetch : 렌더링과 데이터 페칭을 동시에 우리의 목적 필요한 데이터를 최대한 즉시 가져오자 보통 데이터 fetch는 useEffect를 이용하는데, 이는 dom이 실제로 화면에 그려져 interactive한 이후이다. (코드 로드 > 코드 파싱 > 코드 실행 > 컴포넌트 렌더링 > useEffect로 요청) 그리고 사용자는 렌더링 시간 + 데이터 가져오는 시간 만큼을 시리얼하게 기다려야 한다. 화면 그리기 전에 필요한 데이터를 가져올 수는 없을까? Render as you fetch (렌더와 데이터 페치를 동시에)를 사용한다. 해당 방법을 위해선 suspense가 필요하다. 먼저, loading, error, success를 사용하는 useEffect훅을 대체한다. 성공하면 데이터, 그 외에는 promise를 throw 한다. function .. 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.. React Suspense : 비동기 렌더링 내용은 아직 "미정" 상태에요 Dan Abramov: Beyond React 16 | JSConf Iceland - YouTube 이전 1 2 다음
