REACT (187) 썸네일형 리스트형 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.. 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.. [짤막글][Concurrent Mode] 비동기 모드 사용 방법 index.js에서 딱 세줄이면 된다. cost rootEl = document.getElementById('root'); const root = ReactDOM.createRoot(rootEl); root.render(); // 마운트 root.unmount(); // 언마운트 비동기 모드를 사용하는 이유? 렌더링이 인터랙션을 막지 않도록 잡 스케줄링을 할 수 있게 렌더링 작업을 쪼개 수행하기 위함 React Suspense : 비동기 렌더링 내용은 아직 "미정" 상태에요 Dan Abramov: Beyond React 16 | JSConf Iceland - YouTube 이전 1 ··· 19 20 21 22 23 24 다음
