[React] useMemo를 이용한 결과 값 최적화

Memoization이란?

메모이제이션이란 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술입니다.

 

예시 코드

function Component ({a, b}) {
    const result = compute(a,b)
    return <div>{result}</div>
}

 

Component 내의 compute 함수가 만일 복잡한 연산을 수행한다면 결과 값을 리턴하는 데에 오랜 시간이 걸리게 될 것입니다.

이럴 때 컴포넌트가 계속 리렌더링 된다면 연산을 수행하는데 오랜 시간이 걸려서 성능에 안 좋은 결과를 미치게 되며 UI 지연현상도 일어나게 될 것입니다.

이러한 현상을 해결해주기 위해서 사용하는 것이 useMemo입니다.

compute 함수에 넘겨주는 a, b의 값이 이전과 동일하다면 컴포넌트가 리 렌더링 되더라도 연산을 다시 하지 않고 이전 렌더링 때 저장해두었떤 값을 재활용 하는 방식입니다.

 

useMemo 적용하기

useMemo로 함수를 감싸준 후에 첫 번째 인수에는 함수를, 의존성 배열에는 compute 함수에서 사용하는 값을 넣어주면 됩니다.

function Component ({a,b}) {
    const result = useMemo(compute(a,b), [a,b]);
    return <div> {result} </div>
}