[React] React.memo, useMemo, useCallback

Today, What I learned?

프론트에서 성능 최적화를 어떻게 할 수 있을 것인가?를 요새 고민하고 찾아보고, 여러 글들을 읽어보고 있다.

그 방법 중 하나인 불필요한 렌더링 줄이기!..

렌더링을 줄이는 방법 중 하나인 memoization에 대해 정리해 본다.

 

 

memoization

memoization은 리액트에만 해당되는 기술은 아니다. 컴퓨터가 동일한 계산 작업을 반복해야 할 때,

이전의 계산한 값을 메모리에 저장해 놓고 사용하여 속도를 높이는 기술이다.

쉽게 말해서 반복 작업 해야 할 부분을 메모를 해놓고 가져다 쓰는 느낌?

보통 애플리케이션의 최적화를 위해서 많이 사용된다.

 

리액트에서의 memoization 방법은 크게 세 가지.

React.memo, useMemo, useCallback 이렇게 있다.

차례대로 알아보기 전에 먼저 어떨 때 리렌더링이 되는지를 봐야 할 것 같다.

 

 

리렌더링 조건

리액트에서 컴포넌트가 리렌더링 되는 조건은 이렇다.

1. 컴포넌트에서 state가 바뀌었을 때
2. 컴포넌트가 내려받은 props가 변경되었을 때
3. 부모 컴포넌트가 리렌더링 된 경우

 

React.memo

React.memo는 컴포넌트를 감싸서 사용하고, 컴포넌트를 캐싱하는 함수다.

부모 컴포넌트가 리렌더링 될 때, 자식 컴포넌트의 불필요한 리렌더링을 막는다.

 

사용할 수 있는 방법은 크게 두 가지다.
컴포넌트를 선언할 때 사용하거나, export 할 때 감싸주어 사용하거나.

const Result = React.memo(() => {
  return ()
})

export default React.memo(Box1);

 

 

useMemo

useMemo는 값을 캐싱한다.

동일한 값을 반환하는 함수를 반복적으로 호출한다면, 처음 값을 저장해서 필요할 때마다 이전의 값과 동일하다면 해당 값을 다시 사용하는 것!..

의존성 배열의 값이 바뀔 때마다 콜백함수를 다시 호출해서 메모리에 결괏값을 업데이트한다.

const value = useMemo(()=>{  
    return 반환할 함수
}, [depenedencyArray];

 

 

무거운 작업을 하고 있을 경우에 매번 함수가 다시 렌더링 되어 값을 받아올 필요는 없기 때문에, 이런 경우에 사용할 수 있다.

useMemo(()=> heavywork(),[]);

 

 

 

useCallback

useCallback은 컴포넌트가 리렌더링 될 때 함수의 재생성을 막아준다.

자바스크립트에서는 함수 역시 객체의 한 종류이기 때문에 참조 타입이다.

즉 렌더링 될 때마다 참조 메모리의 주소가 달라지기 때문에 새로운 메모리에 할당되고, 다른 값으로 인식되는 것이다.

 

리렌더링 될 경우 함수 내용 자체는 동일하기 때문에 함수 자체를 메모한다고 볼 수 있다.

const initCount = useCallback(()=>{
    // 함수 내용
}, []); 

// 여기서의 [] => 의존성 배열

 

 

 

하지만 모든 컴포넌트에 메모를 적용하는 것이 좋진 않다.

모든 컴포넌트에 메모를 적용한다면 캐시가 너무 커질 수 있고, props 변경이 많이 일어나는 경우에는 캐싱을 하는 것이 무의미하기 때문!...

이제 차주부터 최적화를 해나 갈 텐데 그때 memoization을 어떤 식으로 사용했는지 남겨봐야겠다.