본문 바로가기

suspense

(11)
리액트 use, 새로 등장한 훅을 알아보자 (React use) 최근 다수 유명 리액트 라이브러리 메인테이너들을 흥분시킨 RFC가 발표되었습니다. https://github.com/reactjs/rfcs/pull/229 RFC: First class support for promises and async/await by acdlite · Pull Request #229 · reactjs/rfcs Adds first class support for reading the result of a JavaScript Promise using Suspense: Introduces support for async/await in Server Components. Write Server Components using standard JavaScript a... github.com ..
[3분 리액트] React18 Suspense의 Streaming SSR에 대해 알아보자 원문 : https://blog.saeloun.com/2022/01/20/new-suspense-ssr-architecture-in-react-18 Deep dive into the new Suspense Server-side Rendering ( SSR ) architecture in React 18 Ruby on Rails and ReactJS consulting company. We also build mobile applications using React Native blog.saeloun.com TLDR 서스펜스는 SSR의 다음과 같은 문제를 해결합니다. 페이지 상호작용을 위해 모든 것들을 수화해야 합니다. 페이지는 한번에 인터랙티브하게 됩니다. 수화를 시작하기 전에(페이지를 인터랙티브 하게 ..
SuspenseList 통해 서스펜스 그룹화 Suspense로 코드스플리팅 해서 각 View를 비동기로 가져올때, 도착 순서대로만 보여준다면 레이아웃도 깨지면서 사용자들 눈에도 이상하게 보일 것이다. 보통 사람들이 기대하는 순서는 위아래, 왼오른쪽 배치이기 때문이다. 갑자기 아래쪽의 오른쪽 요소부터 나타난다면? 따라서 비동기 렌더링에도 질서가 필요하다. SuspenseList 컴포넌트는 아래와 같은 props를 갖고 있다: revealOrder: suspending 컴포넌트들이 그려질 순서 {undefined}: (default) 데이터가 도착하는 순서대로 "forwards": 앞에 있는 컴포넌트가 suspending이 끝나야 다음 것을 보여줌 (앞->뒤) "backwards": 뒤에 있는 컴포넌트가 suspending이 끝나야 다음 것을 보여줌 ..
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..
Suspense와 리소스 캐싱하기 주의 : 해당 코드는 실전에서 사용할 만큼 완벽하지는 않음. 캐시와 동시성, 버퍼링은 컴퓨터 사이언스 있어 가장 어려운 문제 중 하나임. 실전에서는 검증된 라이브러리를 사용하자 (react-query) 캐시는 UI 상태가 아님. 리액트의 주 관심사는 UI를 위한 상태관리임. UI를 위한 상태가 아닌 데이터는 관심사 분리의 대상임. 비동기 데이터 관리는 전적으로 개발자 판단임. ex) 리덕스, apollo-graphql, relay, swr, 커스텀 컨텍스트, recoil 주의 2 : 렌더 메소드 안에서 프로미스를 만드는 것은 위험함 반드시 한번만 호출될 것이라는 가정이 없기 때문임. 따라서, 주의해서 사용해야함. function MySuspendingComponent({value}) { let resou..
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..