1. 개요VritualDOM의 동작에 관해 다룬 적이 있었다.https://w-storage.tistory.com/m/71 [React] VitrualDOM을 알아보자!1. 개요React는 최적화를 위한 기능들을 내장하고 있다. 그중 하나가 VirtualDOM이다.VirtualDOM은 무엇이고 어떻게 작동할까? 또 React는 왜 VirtualDOM을 사용할까?이번 글에서는 VirtualDOM과 동작 방식에 대w-storage.tistory.com여기서 DOM 트리를 수정할 때 Reflow, Repaint과정에서 리소스를 많이 소모한다 했는데, Reflow와 Repaint가 무엇인지 한번 알아보자! 2. ReflowReflow는 레이아웃을 변경하는 작업이며 레이아웃 단계에서 발생한다.width, heig..
최적화
1. 개요React는 최적화를 위한 기능들을 내장하고 있다. 그중 하나가 VirtualDOM이다.VirtualDOM은 무엇이고 어떻게 작동할까? 또 React는 왜 VirtualDOM을 사용할까?이번 글에서는 VirtualDOM과 동작 방식에 대해 알아보자! 2. DOM이란?화면이 렌더링될 때 아래의 순서로 렌더링된다.서버로부터 html요소를 받아온다.html을 위에서부터 파싱하며 DOM트리 구조를 구성한다.css를 만난 경우 CSSOM트리 구조를 구성한다.DOM트리와 CSSOM트리를 결합해 Render트리를 생성한다.Reflow, Repaint과정을 거쳐 화면을 렌더링한다., 같은 태그들은 Javascript가 직접 이용할 수 없기 때문에 객체로 변환되는데, 이것이 DOM(Document Object..
최초 작성일 : 2024.09.10최종 수정일 : 2024.09.10 1. 개요웹 또는 앱을 개발하고 운영하다보면 점점 최적화가 필요해진다. 이 때 자주 사용하는 메모이제이션(memoization)인 useCallback, useMemo hook과 고차 컴포넌트 React.memo에 대해 정리해 보았다. 2. 3줄 요약바쁜 분들을 위한 3줄 요약useCallback : 함수를 메모이제이션 해야할 때useMemo : 값을 메모이제이션 해야할 때React.memo : 컴포넌트를 메모이제이션 해야할 때 3. 메모이제이션?메모이제이션은 이전에 계산한 결과를 캐싱해두고 동일한 입력이 주어졌을 때 캐싱된 값을 반환하는것을 말한다.어떤 결과를 얻기 위해 계산 과정을 거치는데 만약 이런 결과가 무겁고 오래 걸리는 연산..
