[React]메모이제이션(Memoization)

임동현·2022년 5월 1일

메모이제이션(Memoization)

setState 함수를 사용하게 되면, 화면 전체가 다시 렌더가 되면서 state 와 여러개의 함수들을 다시 그려내게 됩니다.

그런데, 단순하게 이메일 주소를 받아오는 과정이라고 했을 때 Input 태그에 onChange 이벤트로 setState 함수를 실행하게 되면 문자 하나 하나 변경이 될 때 마다 컴포넌트가 다시 렌더가 되고
이 과정에서 여러개의 state 와 함수들이 계속해서 재생성 됩니다.

컴포넌트의 크기가 작다면 당장에 큰 영향은 없겠지만 컴포넌트의 크기가 매우 크거나 함수 하나 하나 의 로직이 매우 길다면 단순히 set 함수로 인해 긴 로직을 가지는 함수를 처음부터 다시 그려내는 과정이 약간 불필요하다고 느껴지게 됩니다.

메모이제이션은, 특정 연산이나 특정 함수의 값을 기억해 놓은후 State 의 변화로 컴포넌트를 재 렌더 하더라도 재 생성하는 것이 아니라 기존에 저장된 값을 그대로 사용할 수 있게 합니다.

메모이제시연 기능을 사용함으로서 컴포넌트의 불필요한 재 렌더링을 줄여 좀더 빠른 컴포넌트 렌더링을 기대할 수 있게 됩니다.

useCallback / useMemo / memo

React 컴포넌트에서 사용할 수 있는 메모이제이션은 memo 와 useMemo 와 useCallback
이 있습니다.

memo

memo 는 컴포넌트를 메모이제이션 하는 기능입니다.

memo 로 감싸진 컴포넌트의 결과를 저장시킨 후,
새로 렌더되는 결과가 저장된 결과와 같다면 해당 컴포넌트를 재렌더 하지 않게 합니다.

function Students({ name, class }) {
	return(
		<div>
			<p> 학생 명단표 </p>
			<div> 이름 : {name} </div>
			<div> 반 : {class} </div>
		</div>
	)
}

export default React.memo(Students)

위 코드로 예시를 본다면 학생의 이름과 반 정보를 props 로 받아오는 컴포넌트가 있다고 했을 때 memo 로 적용된 컴포넌트는 상위 컴포넌트가 재렌더 되더라도 넘어오는 props 의 값이 동일하다면 컴포넌트를 재 렌더 하지않게 됩니다.

useMemo

useMemo 는 연산된 결과를 담는 변수의 값을 저장합니다.

function Count({ number }) {

	function add() {
		console.log('연산 중')
		return number += 1;
	}

	const sum = useMemo( () => add(), [number] )
	return(
		<div>
			결과 : {sum}
		</div>
	) 
}

useMemo 에는 총 두개의 인자값을 받아올 수 있습니다.
첫번째 인자로는 적용할 연산 함수를 넣어줍니다.
두번째 인자로는 적용할 변수를 배열로 감싸줍니다.