SPA/REACT7 리플로우가 일어나는 환경에서 React Suspense 사용해보기 import React from "react"; const imgCache = { __cache: {}, read(src) { if (!src) { return; } if (!this.__cache[src]) { this.__cache[src] = new Promise((resolve) => { const img = new Image(); img.onload = () => { this.__cache[src] = true; resolve(this.__cache[src]); }; img.src = src; setTimeout(() => resolve({}), 7000); }).then((img) => { this.__cache[src] = true; }); } if (this.__cache[src] inst.. 2022. 1. 18. [React] useState의 초깃값 지연 useState 및 setState를 많이 사용들하고 계실텐데요. 한동안 React로 작업했다면 아마 useState를 사용했을 겁니다. 다음은 API의 간단한 예입니다. function Counter() { const [count, setCount] = React.useState(0) const increment = () => setCount(count + 1) return {count} } 초기 상태 값으로 useState를 호출하면 해당 상태값과 이를 업데이트하기 위한 메커니즘(dispatch 함수)이 포함된 배열이 반환되면서, 상태에 대한 새로운 값을 전달하고 구성 요소를 다시 렌더링하여 useState가 다시 호출되어 새 상태 값과 디스패치 함수를 다시 검색합니다. 그러나 가끔 사용할 수 있는 .. 2021. 1. 1. [React] React를 위한 렌더링 캐시 React를 위한 렌더링 캐시SSR (Server Side Rendering)은 웹 앱을 더 빠르게 표시하는 매우 유용한 기술입니다. 초기 HTML은 자바 스크립트가 파싱되기 전에 표시되며 사용자가 무엇을 탭할지 결정할 때 핸들러가 준비됩니다. React의 서버 측 렌더링은 추가 작업이 필요하며 서버 비용이 필요합니다. 또한 서버 팀이 서버에서 JavaScript를 실행할 수없는 경우 문제가 발생합니다.특히 로그인이 필요한 페이지와 사용자의 정보가 관리되는 페이지가있는 경우 CDN 설정이 상당히 복잡해집니다. Render Caching이라는 새로운 개념을 배우고 싶습니다. 이것은 서버에 코드를 작성하지 않고도 SSR처럼 사용자에게 즉각적인 성능 향상을 제공 할 수있는 멋진 트릭입니다. 렌더링 캐싱이란 무.. 2019. 1. 27. 이전 1 2 다음
