리액트 컴포넌트 내에서 반복적으로 계산되는 값 최적화하는 법

그래프을 렌더링하는 컴포넌트에서 그래프를 위한 데이터 상태를 갖는데 이를 필터링 한 값을 계산하여 사용한다고 해보자.

그래프 데이터가 100만개 있고 graphData([1,2,3,4,5,6, ... , 1000000]) 이 있다고 하고 짝수번 째 인덱스 값들을 사용하여 계산한 값을 evenValue에 저장하여 사용한다고 해보자.

const evenValue = graphData[0]**2+graphData[2]**2...graphData[1000000]**2 라는 표현식이 있을 것이다.

별도의 작업 없이 코드로 타이핑 되어 있다면 컴포넌트에서 렌더링 될 때마다 이 연산이 렌더링 될 때마다 다시 계산될 것이고 그 비용은 굉장히 클 것이다. 따라서 리스트의 값이 변경이 되지 않았다면 재사용이 되는 것이 필요하다. 

이 때, useMemo를 사용하여 dependency arrray에 포함된 값이 변경될 때만 evenValue를 다시 계산하도록 최적화할 수 있다.

function Comp(graphData){
	const evenValue = useMemo(()=> { 
    	return graphData[0]**2+graphData[2]**2...graphData[1000000]**2 
    }, graphData)

    
    return <div>{evenValue}</div>
}



export default Comp

function component에서는 useMemo를 사용하면 된다.