react-suspense (3) 썸네일형 리스트형 Suspense with a Custom Hook 훅의 장점은 인터랙션, 사이드이펙트, 메모이제이션을 추상화 / 캡슐화 할 수 있다는 점 위 로직들을 별도로 분리하여 재사용 할수 있다는 것이다. 아래와 같이, 데이터와 상태만 남기고 업데이트 코드를 전부 훅 안에 캡슐화 할 수 있다. (isPending은 애니메이션 지연 시간 의미) const [pokemonResource, isPending] = usePokemonResource(pokemonName) 구현은 아래와 같이 한다. const SUSPENSE_CONFIG = { timeoutMs: 4000, busyDelayMs: 300, busyMinDurationMs: 700, } const PokemonResourceCacheContext = React.createContext({}) function.. Suspense와 Image 이미지의 placeholder가 없으면 레이아웃이 깨지기 쉽다. 이미지 캐시, 이미지 플레이스홀더 사용, Render as you fetch를 구현해보자. function preloadImage(src) { return new Promise(resolve => { const img = document.createElement('img') img.src = src img.onload = () => resolve(src) }) } 이미지 서스펜스 활용의 기본 1. 서스펜스 데이터를 렌더링할 뷰를 구현한다. lazy로 코드 스플리팅하기 위해, default로 내보낸다. (데이터와 코드 동시에 가져오기.) // 리소스는 이렇게 가져옴. function createPokemonResource(pokemonName.. Render as you fetch : 렌더링과 데이터 페칭을 동시에 우리의 목적 필요한 데이터를 최대한 즉시 가져오자 보통 데이터 fetch는 useEffect를 이용하는데, 이는 dom이 실제로 화면에 그려져 interactive한 이후이다. (코드 로드 > 코드 파싱 > 코드 실행 > 컴포넌트 렌더링 > useEffect로 요청) 그리고 사용자는 렌더링 시간 + 데이터 가져오는 시간 만큼을 시리얼하게 기다려야 한다. 화면 그리기 전에 필요한 데이터를 가져올 수는 없을까? Render as you fetch (렌더와 데이터 페치를 동시에)를 사용한다. 해당 방법을 위해선 suspense가 필요하다. 먼저, loading, error, success를 사용하는 useEffect훅을 대체한다. 성공하면 데이터, 그 외에는 promise를 throw 한다. function .. 이전 1 다음
