성능최적화 (2) 썸네일형 리스트형 CSR 성능 최적화를 위한 PRPL 패턴 with React rendering-on-the-web 문서서는 클라이언트 렌더링 최적화를 위해 RTTs를 줄이거나 중요한 스크립트와 데이터를 를 사용하여 더 빨리 전달하거나, JS 용량을 줄이거나(tight JavaScript budget) PRPL 패턴을 사용하거나 코드 스플리팅을 사용하거나(aggressive code-splitting) Application Shell caching을 사용하라고 합니다. 이 중에서 PRRL 패턴을 알아보겠습니다. TL;DR P : 링크의 rel 속성을 통해 프리 로딩(페치) 이용 R : 서버 렌더링을 이용해 프리 렌더링 이용 P : 서비스 워커를 이용해 프리 캐시를 이용 L : loading 속성을 통해 지연 로딩을 이용 PRPL 패턴이란? PRPL은 다음의 약어입니다. Push (.. 리액트 성능 최적화 :contextAPI 컨텍스트 API는 props drilling을 막기 위한 수단일 뿐이며, 내부의 state가 갱신되면, 하위 컴포넌트들이 전부 렌더링되는, 리액트 컴포넌트의 룰을 벗어나지 않는다. 즉, 가 다시 렌더링될 때마다 하위 컴포넌트는 전부 렌더링된다. const CountContext = React.createContext() function CountProvider(props) { const [count, setCount] = React.useState(0) const value = [count, setCount] return } 언제 zustand/redux를 사용하고 언제 context API를 사용할까? [짤막글] 언제 context API를 사용하고 언제 zustand나 redux를 사용할까요? TLD.. 이전 1 다음
