useMemo, useCallback, memo

 

useMemo

성능 최적화를 위해 사용되는 React 훅

 

컴포넌트가 리렌더링 될 때마다 계산된 값을 메모이제이션한다.

 

의존성 배열이 변경되지 않는 한 이전 계산 결과값을 재사용하며,

그렇지 않은 경우 기존 함수의 결과값을 그대로 반환한다.

=> 불필요한 계산 방지 & 렌더링 성능 개선

 

출처: 오즈코딩스쿨 리액트 강의

 

useCallback

함수를 메모이제이션하는 데 사용 & 성능 최적화를 위해 사용되는 React 훅

 

의존성 배열 중 하나라도 변경되면 메모이제이션된 콜백 함수 반환

=> 컴포넌트가 렌더링 될 때 불필요한 함수 재생성을 방지한다.

 

함수를 반환한다는 점에서 값을 반환하는 useMemo와 다르다.

 

출처: 오즈코딩스쿨 리액트 강의

메모이제이션(Memoization)?

useMemo와 useCallback 같은 메모이제이션 훅을 통해 최적화를 위해 사용

 

연산량이 많은 함수의 호출 결과를 저장해 두었다가, 같은 입력 값으로 함수를 호출하면

새로 함수를 호출하지 않고 이전에 저장해놨던 호출 결과를 바로 반환

=> 반환 시간 절약 & 불필요한 중복 연산 x

 

 

React.memo

React의 고차 컴포넌트(Higher-Order Component)

 

함수형 컴포넌트의 성능을 최적화하는 데 사용

 

React.memo는 props 변화에만 영향을 준다.

=>컴포넌트의 props가 변경되지 않는 한 리렌더링 x

props가 변경되지 않으면, React.memo는 이전의 렌더링 결과를 재사용한다.

 

자식 컴포넌트가 props에 의존하고, 부모 컴포넌트가 자주 렌더링 되는 경우 많이 쓴다.

 

출처: 오즈코딩스쿨 리액트 강의

 

요약

 

useMemo

함수 호출 결과 저장

계산된 값을 메모이제이션하고, 불필요한 재계산을 방지하는 방법

 

useCallback

함수 저장

함수가 불필요하게 새로 생성되지 않도록 최적화하는 방법

 

React.memo

컴포넌트 저장

컴포넌트가 props가 변경되지 않는 한 리렌더링되지 않게 하는 방법