이전에 브라우저의 렌더링이 어떤 방식으로 이루어지는 지 알아봤다 이번에는 React에서의 렌더링을 알아보자! 클래스 컴포넌트에서의 LifeCycle에 대한 이미지를 가지고 왔다. ComponentDidUpdate, DidMount 등등은 우리가 많이 알고 있는 익숙한 것들이다. 하지만 옆에 Render Phase, Commit Phase에 대해서는 특별하게 들어본 적이 없다. React에서의 Render Phase와 Commit Phase가 무엇인지 알아보자 Render Phase 간단하게 말하자면 컴포넌트 함수를 호출해서 React의 Element를 반환하고 새로운 Virtual DOM을 만들어준다. 그리고 최초 렌더링이 아니라면 재조정을 통해서 실제 DOM에서 적용할 변경점을 확인한다. 재조정 ( R..

React 성능을 측정할 수 있는 Profiler라는 도구가 있다. 사용하기 위해선 크롬에서는 React Developer Tools라는 익스텐션을 설치해야 한다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 336ac8ceb on 7/13/2022. chrome.google.com 설치하고 React 프로젝트를 실행해서 개발자 도구를 들어가면 다음과 같이 Profiler가 있다. Pro..

React에서 UI의 성능을 증가시키기 위해서 React.memo를 제공한다. React.memo는 렌더링의 결과를 메모이징해서 새로운 렌더링이 감지될 때, props가 같다면 메모이징한 결과를 재사용한다. const compoenent = React.memo(({title, content}) => { return ( {title} {content} ) }) 다음과 같은 컴포넌트가 있다면, React.memo는 title과 content가 변경되지 않는다면 메모이징된 결과를 다시 사용한다. const ParentsComponent = () => { return anyfuntion()}/> } 부모 컴포넌트에서 자식 컴포넌트에게 상태값만 넘겨주는 것이 아닌, 아무개 함수를 넘겨주는 경우도 있을 것이다. 이..

1. Memoization ? Memoization은 컴퓨터 프로그램이 동일한 계산을 반복해야할 때, 이전 계산한 값을 메모리에 저장함으로 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 2. React의 Memoization ? 1. memo 동일한 props로 렌더링을 한다면, React.memo를 사용하면 성능 향상을 누릴 수 있다. memo를 사용하면 React는 컴포넌트를 렌더링하지 않고, 마지막으로 렌더링된 결과를 재사용한다. import React, { useState, useEffect } from "react"; import MemoItem from "./MemoItem"; const commentList = [ { title: "comment1", con..