[React] useMemo 사용하기.

useMemo

useMemo는 컴포넌트의 성능을 최적화 할 수 있는, React의 대표적인 Hook으로, Memo는 Memoization을 의미한다.

Memoization는 기존의 수행한 연산의 결과값을 어딘가에 저장해두고, 동일한 입력이 들어오면 재사용을 하는 프로그래밍 기법을 의미한다.

 

React의 함수형 컴포넌트는 렌더링 -> Component 함수 호출, 모든 내부 변수의 초기화의 순서를 거치게 되기에, 아래의 예제에 있어서 item이라는 변수의 값은 항상 초기화 되기에, itemValue 함수는 항상 다시 호출된다. 지금은 가벼운 함수지만, 무거운 함수라면, 계속 다시 함수를 호출하는 것은 매우 비효율적이다.

function Component(){
  const value = itemValue()
  return <h1>{value}</h1>
}

function itemValue(){
  return 1
}

 

 

useMemo를 사용하게 된다면, 렌더링 -> Component 함수 호출, Memoize된 함수를 재사용하는 순서를 가지게되며, itemValue()를 계속 호출을 할 필요가 없이, 이전에 계산한 값을 메모리에서 꺼내와 재사용할 수 있게한다.

 

useMemo는 두 개의  인자를 받는 데, 첫번째 인자는 콜백 함수를, 두번째 인자로는 의존성 배열을 받는다. 의존성 배열이 업데이트 될 때만, 콜백 함수를 다시 호출 해서, Memoization된 값을 업데이트 한다. 만약, 빈 배열이 들어간다면, 컴포넌트가 처음 마운트 될 때만 실행이 된다.

const value = useMemo(() => {
    return itemValue();
},[item])

 

주의할 점은 꼭 필요할 때만 사용해야한다는 것이다. 값을 재활용 하기 위해 메모리를 소비해서 저장하는 것이기에, 불필요한 값까지 사용하면, 성능이 오히려 안 좋아질 수도 있다.