2022/06/02 (2) 썸네일형 리스트형 리액트 디자인패턴 : Render Props(렌더 프롭스 패턴) TLDR : 렌더 프롭 패턴 = 컴포넌트 내 비즈니스 로직(캡슐화) + 비즈니스 로직 결과물을 이용한 렌더링 hook과 함께 렌더 프롭스 패턴은 죽었다는 의견이 많다. 하지만 아직 활용처가 남아있다는 사람이 있다. 특정 조건에서는 Render Props Pattern이 hooks보다 낫다는 것이다. 바로 선택적 렌더링이다. 렌더 프롭은 선택적으로 렌더 체인을 단락하고 다른 view로 일찍 반환할 수 있다. 즉 렌더 로직을 바이패스하는 서킷 브레이커와 같은 역할을 하는 컴포넌트들의 체인을 만들 수 있다. either monad와 비슷하다고 보면 될 것이다. DIY : 토큰을 통해 유저 정보 가져오기 사용자 id를 통해 토큰의 존재 여부를 판단한다. type Token = string; type Id = n.. 리액트 성능 최적화 : Code Splitting(코드 스플리팅) 모든 최적화 방법중에 성능이 가장 좋다. TLDR 필수사항 React suspense 필요 - 비동기 상태와 렌더링 상태의 동기화 React.Lazy 사용 default export 필요 추가 최적화 + eager loading 사용 (good) ++ 웹팩 매직 키워드를 이용한 prefetch 사용 (best) 시각적 확인 : 네트워크 탭과 커버리지 탭 사용 크롬 incognito 모드를 사용하는 것이 좋음. 크롬 확장 프로그램을 다운받지 않기 때문 커버리지 탭 사용 방법 cmd + shift + p > show coverage 서스펜스 팁 Lazy Loading 먼저 다이나믹 임포트가 필요하다. // 다이나믹 임포트. const loadGlobe = () => import('../globe') 서스펜스.. 이전 1 다음
