[TIL] 22.12.13 - 성능최적화 (Memoization - useMemo, useCallback, memo), Reflow / Repaint, Preload / Prefetch

Memoization

countState를 버튼을 클릭해서 값을 변경하면 화면이 리렌더가 되면서 let으로 선언한 변수는 초기화가 된다.

자식 컴포넌트가 return에 있을 경우, 부모가 리렌더 될때마다 자식도 같이 리렌더 되기 때문에 비효율적이다.

react developer tools
크롬 웹스토어에서 react developer tools 를 설치해준다.
설치하면 개발자 도구에 proflier에 생성되는데, Highlight updates when componets render를 체크해주면 렌더링 될 대상일 때 영역을 표시해주는 것을 확일할 수 있다.

useMemo() / useCallback()

useMemo(), useCallback()은 불필요한 값들이 지속적으로 다시 만들어지지 않도록 유지시켜주는 hooks이다.

• useMemo로 변수를 기억한다.
  컴포넌트 리렌더가 될때 값이 변경되지 않고, 의존성 배열에 값이 담길 때만 변경된다.

• useCallback으로 함수를 기억한다.

useCallback으로 함수를 감싸주게 되면, 해당 함수를 다시 불러오지 않고 이전에 불러왔던 함수를 실행시키게 된다. 이를 눈으로 확인하기 위해 state를 담은 함수에도 useCallBack을 감싸주었다.

그리고 카운트 버튼을 클릭하면 카운트가 고정된다. 즉, 이전에 불러왔던 값을 유지시켜준다.

이렇게 함수는 다시불러오지 않지만 값은 올려주고 싶을 때, prev를 이용할 수 있다.

setCountState((prev)=>prev+1) 이렇게 setCountState함수를 작성하면onClickCountState 함수를 새로 그리지 않지만, state는 올려줄 수 있다.

=> useMemo, useCallbacke은 의존성 배열에 여러개의 변수가 들어갈 경우, 유지보수가 힘들기 때문에 변수가 없거나 한 두개일 경우에만 사용해준다.

tip) 알아두면 유용한 개발자 도구 - 구글 웹스토어에서 설치

1. Apollo Client Devtools
→ 설치후 app.tsx에서 client 설정 부분에 connectToDevTools : true로 설정해주어야 함
2. wappalyzer
→특정 사이트에 들어가면 해당 사이트가 사용한 스택을 분석해줌

memo

memo는 react에서 제공해주는 기능이며, import해서 사용한다.

import {memo} from "react"

자식 컴포넌트를 memo()로 감싸서 export해주면 부모에서 import 한 자식컴포넌트는 리렌더되지 않는다.

memo를 적용해주면 변경되는 state가 props로 넘어갈때만 리렌더링된다.

모든 컴포넌트에 memo를 적용하는 방법은 좋은 방법이 아니다.
(리렌더가 되야하는 컴포넌트는 memo가 필요없기 때문)

map에서 memo 사용시 주의 사항 - uuid

uuid를 사용하면 memo를 걸어놔도 key값이 변경되어 props로 넘어가기 때문에 변경된 부분이 모두 리렌더링 된다.

-> index나 uuid말고 고유한 값을 만들어 주는것이 좋다.

Critical-Rendering-Path

• HTML 준비 : Document를 객체형태로 만듦 (DOM). DOM-tree
• CSS 준비 : CSSOM(Css Object Model)
• Render-tree : HTML, CSS를 합친 것
• 배치하기 (Layout) / 색칠 (Painting)

Reflow / Repaint

• reflow : 렌더링 되어야 할 요소들을 화면상 위치를 그려주는 과정
• repaint : 위치를 잡고 난 이후 색칠을 해주는 과정

색칠은 고정된 상태에서 색만 다시 칠하기 때문에 성능 차이가 없지만, 위치가 변경되면 색도 다시 칠해야 하기 때문에 성능이 느려진다.

따라서, 가급적 Reflow가 일어나지 않도록 코드를 작성해주는 것이 좋다.

reflow 예제

데이터가 비어있다 나중에 들어오는 경우 UI 상으로 데이터를 뿌려주는 부분의 크기가 달라지는 것을 확인할 수 있다.

layout shift(다운로드 속도로 인한 layout 벌어짐 현상)를 방지하기 위해 new Array()로 layout 틀을 만들어 기본이미지를 먼저 보여준다.

데이터를 뿌려주는 곳 height를 고정시키면 위치상으로 다시 그려야 하는 일이 없기 때문에 reflow가 일어나는 것을 방지 할 수 있다.

Preload / Prefetch

브라우저 렌더링 원리로 성능 개선

Prefetch

prefetch는 다음페이지에서 쓰려고 미리 받는 것이며, 현재페이지를 모두 받아온 이후 제일 나중에 다운로드 해온다.

이동할 페이지의 내용들을 미리 다운로드 받는 방법이기 때문에, 페이지가 이동되어도 기다리지 않고 바로 보여주는 것이 가능하다.

단, 데이터는 미리 다운로드 받지 못한다.

Preload

proload는 현재페이지에서 쓸 이미지들을 모두 다운로드 받아놓는 것이다.

따라서, prefetch와는 다르게 이미지를 index.html를 받아올때 css와 js보다 먼저 받아온다.