패스트캠퍼스 챌린지 15일차 - 리액트 Memoization

 

Memoization

 

Memoization은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때,

이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게하는 기술이다

(출처 : 위키피디아)

 

React 에서는 고차컴포넌트(HOC)와 Hooks를 통해 Memoization 기능을 제공하고 있다.

 

React.memo

 

React.memo는 고차 컴포넌트로,

컴포넌트가 동일한 props로 동일한 결과의 컴포넌트를 렌더링할 경우 React.memo를 호출하여 결과를 메모이징하여 성능향상에 도움을 준다.

(컴포넌트를 바로 렌더링 하지 않고 메모이징한 이전 컴포넌트와 props를 비교하여 변화가 있을시 재렌더링 한다.)

useCallback

 

useCallback은 콜백 함수를 메모이징하여 콜백의 의존성이 변경되었을 때에만 변경되도록 한다.

useMemo와 달리 Memoization된 콜백을 반환한다.

 

** 의존성 값의 배열이 콜백에 인자로 전달되지 않기 때문에 콜백 안에서 참조되는 모든 값은 의존성 값의 배열에 표기해야한다.

 

 

useMemo

 

Memoization된 값을 반환한다. (변수)

useMemo로 전달된 함수는 렌더링 중에 실행되기 때문에 렌더링 중에 실행되지 않아야하는 내용은 포함하면 안된다.

useMemo도 useCallback과 마찬가지로 의존성 값의 배열이 인자로 전달되지 않기 때문에,

배열이 없는 경우 매 렌더링마다 값을 계산하게 된다.

(useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값을 다시 계산할 것이다.)

 

** Memoization과 같은 성능 최적화 방법을 활용해야하는 부분을 식별하기 위해 

React에서는 애플리케이션이 렌더링하는 빈도와 렌더링 비용을 측정하는 Profiler API를 제공한다.

 

 

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.