[TIL] useMemo / React.memo / useCallback

useMemo

useMemo란?

useMemo 훅은 메모이제이션 방식을 기반으로 불필요한 연산을 다시 수행하지 않도록 리액트 앱을 최적화하는 메서드다.

 

메모이제이션은 과거에 계산한 값을 반복해서 사용할 때 과거에 계산한 값을 캐시해 두는 방법으로 전체 계산 속도를 높이는 코드 최적화 기법이다.

 

 

useMemo 사용법

const 캐시된_데이터 = useMemo(콜백_함수, [의존성1, 의존성2, ...]);

 

useMemo 훅을 호출하고 첫 번째 인수로 메모이제이션 하고 싶은 값을 반환하는 콜백 함수와 두 번째 인수로 의존성 배열을 넣으면 된다.

 

useEffect와 동일하게 의존성 배열에 들어가는 값이 바뀌면 콜백 함수를 다시 실행한다. 콜백 함수가 반환하는 값을 useMemo는 그대로 다시 반환한다.

 

React.memo

memo란?

memo는 리액트의 내장 메서드다.

 

인수로 컴포넌트를 받아서 해당 컴포넌트에 최적화 기능을 추가한 다음에 결과값으로 반환해준다.

 

최적화 기능이 추가된 컴포넌트는 props를 기준으로 메모이제이션이된다.

 

메모이제이션된 컴포넌트는 부모 컴포넌트가 리렌더링 되더라도 해당 컴포넌트가 받는 props가 바뀌지 않으면 리렌더링이 발생하지 않도록 메모이제이션되기 때문에 불필요한 리렌더링이 방지되어서 자동으로 최적화가 이루어지게 된다.

 

memo 사용법

import { memo } from 'react';

function App() {
  return(
    ...
  )
}

export default memo(App);

 

컴포넌트 바깥에서 memo 메서드를 호출하고 인수로는 최적화하고 싶은 컴포넌트를 넣으면 된다.

 

useCallback

useCallback이란?

useCallback 훅은 리렌더링 간에 함수 정의를 캐싱해 주는 메서드다.

 

useMemo 훅과 유사한 역할을 하지만 useCallback 훅은 값이 아닌 함수를 반환한다.

useCallback 사용법

const 캐시된_콜백_함수 = useCallback(원본_콜백_함수, 의존성_배열);

 

useCallback을 호출하고 첫 번째 인수로 불필요하게 재생성되지 않도록 방지하고 싶은 함수와 두 번째 인수로 의존성 배열을 넣으면 된다.

 

useCallback은 캐싱된 콜백 함수를 다시 반환하고 의존성 배열이 변경되었을 때만 다시 생성하도록 최적화한다.

 

의존성 배열을 빈 배열로 설정하면 해당 컴포넌트가 최초로 렌더링이 될 때만 해당 함수를 한 번 생성하고 그 뒤에는 리렌더링이 많이 발생한다고 해도 해당 함수를 새롭게 생성하지 않게 된다.

 

 

출처 : 한 입 크기로 잘라먹는 React