1. 브라우저 렌더링 과정

The rendering process of a web page.

참고 자료
Reflow and repaint 성능 비용

2. 브라우저 캐시와 css가 반영이 안되는 경우

브라우저 캐시

브라우저가 빠른 엑세스를 위해 값을 임시로 저장하는 데 사용하는 방식이다.

저장하는 정보들

웹페이지에 방문할 때마다 변하지 않는 것들

• 이미지 : 로고, 사진, 백그라운드 등
• HTML
• CSS
• Javascript

유지보수를 하다 보면 css / js 수정할 일이 있는데, 파일을 수정하고 배포하면 캐시때문에 기존css/js가 남아있다. 파일의 이름을 바꿔도 되지만 해당파일을 불러오는 부분까지 수정해야 하기 때문에 번거롭다.

<link rel="stylesheet" type="text/css href="style.css?v=1.2">

?v=1.2 이라고 파일명 뒤에 쿼리스트링을 붙여주었다.
css를 수정한 후, 번거롭게 파일명을 바꾸는 대신 v 값만 다르게 주면 다른 URL로 인식되기 때문에 캐쉬된 파일이 사용되는 것을 방지할 수 있다.

핵심은, 다르지 않은 파일인데 다른 파일로 인식시킴으로써 파일을 브라우저에게 강제로 다시 받도록 만드는 것이다

참고 링크-1
참고 링크-2

3. 리액트 리렌더링 최적화 방법

1) 변하지 않는 상수 데이터

렌더링 최적화

• 렌더링 단계에서 생성하는 것이 아니라 정적으로 생성해준다.
• 데이터로 분리할 수 있는 값은 따로 상수처럼 사용해준다.
  

2) React.Memo()

• 부모에게 리렌더링이 일어나도 자식은 리렌더링이 일어나지 않도록 해준다.
• 자식: export Child({ prop1, prop2 }) => { return <div> Child </div> }
• 부모 컴포넌트에서 오는 prop1과 prop2가 변경되지 않았다면 자식은 리랜더링 x
• 이때, prop1이 이벤트 핸들 함수라면, useCallback으로 처리해줘야한다.

3) useMemo

• 렌더링 될때마다 외부함수를 이용한 계산을 방지해준다.
• Dependecy가 변경되었을 때만 값을 다시 계산하도록 기억한다.

사용

• 특정 props나 특정 state가 변경 될때만 다시 계산하는 경우
• 함수값 계산 프로세스가 에너지 소모가 많은 경우

사용x

• 클래스 컴포넌트에서는 사용하지 않는다. (render부분만 리랜더링 됌)
• 해당 함수를 scope 밖으로 옮길 수 있는 경우

예시

• const result = useMemo(func(value), [value])
• 컴포넌트가 렌더링 되더라도 value값이 바뀌지 않았다면
• result 값은 외부 함수로 새로 구해지지 않고 기존 값을 재사용
  
  렌더링 될 때마다 valueComputedFromProp 함수가 매번 계산되고 있음
  
  렌더링이 되더라도 props1 값이 바뀐 경우에만 함수가 계산됌

1-4 useCallback

useCallback()

• 함수형 컴포넌트에서 렌더링 될때마다 함수가 매번 생성되는 것을 방지해준다.
• [deps] 안에 참조값들이 변했을 때만 함수를 재생성 하고 아니면 그대로 사용
• 자식한테 props 값으로 넘겨주는 이벤트 핸들 함수들은 useCallback처리 해야 좋다.

• 렌더링 될때마다 expressiveFunction이 재생성된다

• Cb1값이 변경된 경우에만 expressiveFunction이 재생성 된다.

5) useSelector

• State를 조회할 때 객체를 생성하면 하나의 값만 수정해도 다른 값도 재선언된다.

• 아래 예제에서는 count값만 수정해도 prevCount 와 관련된 것도 전부 랜더링됌
  

• 독립선언
  

• equalityFn
  

• shallowEqual
  

6) React.PureComponent 또는 sholudComponentUpdate

• 클래스형 컴포넌트 에서는 souldComponentUpdate를 통해 값이 변했을 경우에만 업데이트를 할 수 있다.
• PureComponent는 shouldComponentUpdate기능이 내장되어 있음
  

memo, useMemo, useCallback으로 React 성능 최적화하기
React 렌더링 이해 및 최적화 (With Hook)
React 에서 useSelector 최적화 하는 3가지 방법.
10 Ways to Optimize Your React App’s Performance