본문 바로가기

FrontEnd

 (437)
리액트 성능 최적화 : Virtual DOM 1. Virtual DOM은 무엇인가요? (공식 문서) Virtual DOM (VDOM)은 UI의 "이상" 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다.. 실제 DOM과 Virtual DOM을 동기화하는 과정을 재조정이라고 합니다. Virtual DOM은 React의 선언적 API를 가능하게 합니다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 합니다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다. Data 조작을 통해 UI를 업데이트하여 돔 조작 코드를 제거하여 생산성을 향상시킵니다. 2. 리액트 컴포넌트의 생명 주기 Re..
리액트 성능 최적화 :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..
리액트 성능 최적화 : 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 "..

티스토리툴바