/ REACT

useMemo 사용

React은 다음과 같이 구성되어 있습니다.




useMemo

useMemo는 컴포넌트 성능을 개선하는데 도움을 줄 수 있는 react Hook입니다. Memo는 Memoization이며 기존의 수행한 연산의 결과값을 따로 저장해두고 동일한 입력이 들어오면 재활용하는 것을 의미합니다.

import { useState } from 'react';

function Cal() {
  // 오래 걸리는 연산
}

function Test() {
  const [count, setCount] = useState(0);

  let result = Cal();

  return (
    <div>
      <button onClick={() => { setCount(count + 1) }}> + </button>
    </div>
  )
}

Cal()이라는 함수가 있는데 이 함수는 연산이 복잡합니다. 이 함수를 Test 컴포넌트 안에서 쓰고 있습니다.
Test컴포넌트안의 버튼을 클릭할 때마다 count라는 state를 1씩 증가시키도록 설정해두었고 버튼을 클릭할 때 마다 state가 변경되니 컴포넌트가 계속 재렌더링됩니다.
그런데 이 떄마다 Cal()함수가 계속해서 실행되기 때문에 비효율적이고 느려질 수 있습니다.
이럴경우 useMemo을 사용하면 좋을 수 있습니다.
useMemo를 사용하면 복잡한 Cal()함수를 반복적으로 실행할 필요가 없습니다.
처음에 계산된 결과를 메모리에 저장하여 컴포넌트가 재렌더링이 되어도 다시 Cal()을 실행하지 않고 이미 계산된 결과를 메모리에서 가져와 재사용할 수 있게 해줍니다.
useMemo는 첫번째 인자로 콜백함수, 두번째 인자로 dependency를 받습니다. 그래서 두번째 인자에 들어간 값이 변경될 때만 콜백함수를 호출해서 메모이제이션된 값을 업데이트하고 다시 메모이제이션을 해줍니다. 만약 두번째 인자가 빈 배열([])이라면 컴포넌트가 로드될 때 1번만 값을 계산하고 이후에는 메모이제이션된 값을 사용합니다.

import { useMemo, useState } from 'react';

function Cal() {
  // 오래 걸리는 연산
}

function Test() {
  const [count, setCount] = useState(0);

  let result = useMemo(() => { return Cal() }, []);

  return (
    <div>
      <button onClick={() => { setCount(count + 1) }}> + </button>
    </div>
  )
}

일단 useMemo를 import한 후, 위와 같이 코드를 작성해주면 컴포넌트가 로드될 때 1번만 실행할 수 있도록 해줄 수 있습니다. 그러면 재렌더링이 될 때마다 동작하지 않으므로 조금 더 효율적일 수 있습니다.

useEffect처럼 dependency도 설정가능하며 특정한 state, props가 변할 때 실행하게 할 수도 있습니다.




End.