프론트 엔드 7주 2일차

성능 최적화

 

메모이제이션(Memoization)

여태까지 우리는 리렌더가 얼마나 많이 일어나든 신경쓰지 않고 프로그래밍을 해왔다. 이러한 것이 우리가 테스트를 하는 환경에서는 상관이 없을 수 있으나 만약 웹이 개발이 완료되서 배포됐다고 생각하면 열악한 환경에서는 이런 것이 사용자들에게 불편을 제공할 수 있다. 이를 해결하기 위해서 원하는 부분의 리랜더링을 막을 수 있는 방법이 useMemo와 useCallback이다.

 

useMemo()

변수의 리랜더링을 막는 함수로 변수와 의존성 배열을 받아서 그 배열 안의 값이 바뀔때만 랜더링되도록 만들 수 있다.

 

사용 예시

위의 random 값 aaa는 useMemo를 사용하여 다른 state가 setState로 바뀌어 리랜더링이 일어나도 random 값이 달라지지 않는다.

 

useMemo를 함수에도 적용시킨 예

useCallback()

useCallback은 useMemo의 함수 버전이라고 생각하면 된다. 

 

사용 예시

 

CRP(Critical Rendering Path)

브라우저에서 화면이 그리는 과정이다.

 

그림 예시

 

 

Layout(크롬), Reflow(파이어폭스) 

Paint(크롬), Repaint(파이어폭스)

 

 

Prefetch, Preload

Prefetch

다음 페이지로 넘어갈 때의 시간을 줄이기 위해서 미리 페이지를 다운받아 두는 방법이다.

 

예시 코드

Preload

다운로드 받는 파일에 우선 순위를 주는 방법이다.

 

예시 코드

 

알고리즘 테스트

오늘 배운 메서드로 padStart를 통해서 문자열의 길이가 n이 될때까지 입력값으로 채울 수 있다.

 

코딩 결과