Front/React 2

React.memo, useMemo, useCallback 차이점과 활용법

React로 개발을 하다보면 원하지 않는 시점에 컴포넌트가 재렌더링 되는 경우가 있다. 이러한 현상을 보고 있으면 스트레스를 받아 성능을 최적화 해야겠다는 생각이 들게된다. 이럴 때 사용할 수 있는 기법 중 하나가 오늘의 주제 “Memoization” 이다. Memoization 이란?컴퓨터가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로서 동일한 계산을 하지 않도록 하여, 속도를 높이는 기술이다. 보통 애플리케이션의 최적화를 위해 사용된다.리액트에서 리렌더링이 일어나는 조건컴포넌트의 state가 변경되었을 때컴포넌트가 상속받은 props가 변경되었을 때부모 컴포넌트가 리렌더링이 된 경우 모든 자식 컴포넌트는 리렌더링React 에서 Memoization을 하는 대표적인 방법Mem..

Front/React 2025.01.12

React의 렌더링 과정(Render Phase 와 Commit Phase)

이전 글에서 알아봤던 기초적인 브라우저 렌더링 과정을 넘어 React의 렌더링 과정도 같이 살펴보자. 1. React의 탄생  배경 : JavaScript의 성능 개선React가 등장한 이유 중 하나는 JavaScript로 DOM을 동적 생성하거나 수정을 할 때 발생하는 Reflow와 Repaint는 비용이 많이 듦으로 과정을 최소화하기 위해서이다. React는 이런 문제를 해결하기 위해 Virtual DOM 개념을 도입하고, 업데이트 과정을 효율적으로 처리한다. DOM 업데이트 최적화아래 코드 예제를 통해 잘못된 코드와 최적화된 코드의 성능 차이를 확인해 보자.잘못된 코드 예시3,000번 DOM을 생성성능 측정 결과: 3,092ms 좋은 코드 예시DOM은 딱 한 번만 생성성능 측정 결과: 3.5ms (..

Front/React 2025.01.06