2022/06/05 (6) 썸네일형 리스트형 리액트 성능 최적화 : Death By a Thousand Cuts (천 번 베이면 죽는다.) Death By a Thousand Cuts 잦은 상태 업데이트는 성능 이슈가 됩니다. 이는 보통 하나의 컴포넌트가 너무 많은 일을 할 때 발생합니다. 이 문제는 식별하기 쉽습니다. 하지만 하나의 상태 업데이트에 너무 많은 컴포넌트가 묶여있으면 찾기 어렵습니다. 이게 contextAPI의 단점입니다. 따라서, 컴포넌트를 일단 작게 만드는게 중요합니다. 기존의 최적화 방법들엔 아래와 같은 문제들이 존재합니다. useMemo, callback등 캐시 방법은 앱의 복잡도를 높입니다. 리액트는 렌더링 외에, 최적화를 위한 연산을 수행합니다. 때로는 메모보다 그냥 렌더링하는게 성능이 좋을 수도 있습니다.(ex 긴 리스트 컴포넌트) 불필요한 리렌더링을 방지할 수 있는 성능 최적화 방법들을 알아보겠습니다. 여러개의 .. 리액트 성능 최적화 : Production Monitoring 사용자가 성능 불만 접수 전에, 성능 문제를 해결합시다. 렌더링 시간의 일부를 어떻게든 추적하고 해당 정보를 서버로 보내 모니터링할 수 있다면 좋을 것입니다. React DevTools만큼 많은 정보를 제공하지는 않지만 유용한 정보를 제공합니다 참고 : facebook은 프로파일링 버전과 비 프로파일링 버전을 동시에 배포합니다, 즉 프로파일링 버전을 사용자의 일부에만 배포하여, 모니터링합니다. 주의 : 프로파일러는 기본적으로 프로덕션 모드에서 동작하지 않습니다. 성능 부하가 될 수도 있으니 주의합시다. Create React App v3.2 이상 버전에서는 다음과 같은 방법을 사용하여 프로덕션에서 프로파일링을 enable할 수 있습니다. yarn build --profile npm run build --.. 리액트 성능 최적화 : 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에 반영 리액트는 매우 빠르지만, 때때로 업데이트에 대한 힌트를 제공해야 한다. 리액트 컴포넌트는 다음 이유 .. 이전 1 다음
