본문 바로가기

분류 전체보기

 (989)
리액트 성능 최적화 : react-virtual TLDR : 눈에 보이는 컴포넌트만 렌더링하자 데이터가 1억개라 생각하면, 이를 다 그리는 건 무의미하다. 사용자는 한번에 다 볼 수도 없고, 상호작용 할 수도 없다. 필요한 만큼만 그려서 최적화하자. 이것은 "virtualization" 혹은 "windowing"이라 하는 개념이며,경우에 따라 많은 데이터를 렌더링하는 컴포넌트의 성능을 개선할 수 있다. React-virtual https://tanstack.com/virtual/v3/docs/guide/00-introduction 1. 훅에 정보 전달하기 import { useVirtual } from "react-virtual"; const rowVirtualizer = useVirtual({ size: items.length, parentRef: ..
리액트 성능 최적화 : React.memo TLDR : React.memo는 불필요한 리렌더링을 막는다. 메모 컴포넌트에 Primitive Value만 props로 넘기도록 설계하자. 더 중요한 것은 리렌더링보다 느린 리렌더링을 막는 것이다. 느린 리렌더링은 useMemo를 통해 회적화한다. React 앱의 라이프사이클은 다음과 같다. → render → reconciliation → commit ↖ ↙ state change render phase : React.createElement로 리액트 엘리먼트를 생성 recolcilation phase : 이전 엘리먼트와 새로운 엘리먼트를 비교함 commit phase : 변경된 부분만 dom에 반영 리액트는 매우 빠르지만, 때때로 업데이트에 대한 힌트를 제공해야 한다. 리액트 컴포넌트는 다음 이유 ..
리액트 성능 최적화 : React.useMemo TLDR : CPU 자원을 많이 소비하는 연산에 useMemo를 사용한다. 사용자에게 최적의 경험을 선사하려면 60fps이상을 제공해야 한다. (1000ms/60) = 약 16.7ms 이니, 하나의 연산이 이 시간 이상 걸리면 안된다는 것을 의미한다. npm run build / npm run serve를 통해 해당 최적화 조건을 확인한다. 크롬 개발자 도구의 성능 탭 > CPU를 6배 느리게 (본인은 맥os + edge를 활용함을 유의) 위 화면의 문제점은 리렌더링이 발생할 때마다 300ms정도 걸리는 연산을 계속 수행한다는 것이다. 다른 상태의 변화에 의해 해당 컴포넌트가 다시 호출될 때마다 300ms가 걸린다면 끔찍하다. 자세히 살펴보면 match-sorter의 연산이 많은 시간을 잡아먹고 있다. ..
리액트 디자인 패턴 : Container pattern (컨테이너 패턴) 데이터 가져오기, 인증, 레이아웃 제공 등과 같은 커스텀 기능을 재사용하는 선언적 방법을 구현할 수 있습니다. 컨테이너 패턴이란? 커스텀 기능을 제공하고 children prop으로 전달된 React 노드를 렌더링하는 컨테이너 컴포넌트를 사용합니다. 패턴의 일부 사용 사례는 다음과 같습니다. 로더 - 컨테이너는 특정 조건이 true인 동안 로더를 표시하고, 그렇지 않으면 콘텐츠를 렌더링합니다. 인증 게이트 - 사용자가 인증되지 않은 경우 컨테이너는 자식을 렌더링하지 않습니다. 레이아웃 및 스타일 제공 (플레이스홀더) - 컨테이너는 일관된 스타일을 제공하는 래퍼 역할을 합니다. 콘텐츠가 다른 여러 대시보드 페이지 컴포넌트가 있고, 각 페이지에 동일한 레이아웃을 제공하고 싶을 때 사용합니다. 컨테이너 패턴 ..
리액트 디자인패턴 : Layout Component (레이아웃 컴포넌트 패턴) TLDR : 레이아웃 컴포넌트 패턴은 불필요한 렌더링을 없애 성능을 개선한다. 컴포넌트 트리의 높이를 낮추어 props drilling의 고통을 해결하고, 유지보수성을 향상시킨다. 사람들이 간과하는 리액트의 성능 최적화 팩터 당신의 리액트 앱을 느리게 하는 실수 위 두가지 게시물이 지적하는 요소는 컴포넌트의 위치다. 자주 바뀌는 공통 상태가 위에 있을 수록 하위 컴포넌트들은 더 많이, 자주 그려질 가능성이 크다. 이를 피하기 위한 방법은 다음과 같다 리렌더링이 불필요한 엘리먼트를 리렌더링 하지 않는다. 리렌더링을 유발하는 관심사에 따라 컴포넌트를 분리한다. 당신의 리액트 앱을 느리게 하는 실수에서 글쓴이는 일반인들이 컴포넌트를 구조화하는 방식을 지적한다. function App() { return (..
리액트 디자인패턴 : View Asset Component (VAC 패턴) TLDR : 렌더링의 관심사를 분리하여 stateless component를 만든다. https://wit.nts-corp.com/2021/08/11/6461 이미 너무 좋은 글이 있지만, 데이터 페치와 렌더링 관심사 분리 관점에서 해당 패턴을 소개해본다. 해당 패턴은 사실 이전에 존재하던 컨테이너-프리젠터 패턴의 fancy-alias일 뿐이다. 최근에 스켈레톤 컴포넌트를 만들 일이 있었다. 즉 로딩 시에 대체 컴포넌트를 보여주는 것이다. 위 예제 링크 간단하게 생각하면 원래 위치의 빵꾸에 가짜 데이터를 넣으면 될 것이다. 하지만 보통 props drilling을 피하기 위해 아래와 같이 컴포넌트 안에 query 로직을 집어넣는다. import "../App.css"; import axios from "..
리액트 디자인패턴 : 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') 서스펜스..

티스토리툴바