FrontEnd (437) 썸네일형 리스트형 React Remix 신상 React framework 간단하게 살펴보기 Remix - Build Better Websites Remix - Build Better Websites Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. remix.run Why I Love Remix (kentcdodds.com) Why I Love Remix I've written tens of thousands of lines of code with Remix and .. 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.. 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(); // 언마운트 비동기 모드를 사용하는 이유? 렌더링이 인터랙션을 막지 않도록 잡 스케줄링을 할 수 있게 렌더링 작업을 쪼개 수행하기 위함 [WIP] 리액트 공식문서 읽기 : Thinking in React with Hooks 내 생각엔 리액트 처음 공부할 때 필독해야하는 글이다. 이걸 안보고 지나갔다니. 내 맘대로 의역 및 요약해서 정리한다. 리액트처럼 생각하기 - 리액트에 대한 오해 리액트는 클래스 컴포넌트에서 시작했다. 함수(형이 아님) 컴포넌트가 나왔다 하더라도, 리액트는 객체지향 철학에 깊은 뿌리를 두고 있다. 상태를 캡슐화하고, 외부로 뷰라는 인터페이스만 제공한다. 객체지향 설계에서 가장 중요한 것은 역할, 협력, 책임이다. 적절한 객체에 적절한 책임을 할당하는 것이 객체지향 설계의 첫번째 덕목이며, 이는 "관심사의 분리"라고도 불린다. 리액트가 클래스보다 좀 더 어려운 점은 뷰라는 관심사가 설계에 포함되어야 한다는 점이다. 이는 css기술과 엮여있고, 컴포넌트 best practice에 대한 논란이 있다. (요즘은.. 이전 1 ··· 48 49 50 51 52 53 54 55 다음
