Memoization

Memoization 이란?

• 메모이제이션은, 특정 연산이나 특정 함수의 값을 기억해놓은 후 State 의 변화로 컴포너트를 재렌더하더라도 재생성 하는 것이 아니라 기존에 저장된 값을 그대로 사용할 수 있게 한다.
• 메모이제이션 기능을 사용함으로서 컴포넌트의 불필요한 재렌더링을 줄여 좀더 빠른 컴포넌트 렌더링을 기대할 수 있게 된다.

메모이제이션의 종류에는 크게 useCallback / useMemo / memo가 있다.

useCallback

• useCallback 은 함수를 메모이제이션 한다.
• 메모이제이션된 함수는 재렌더 되더라도 함수를 새로 그려내지 않아 렌더 효율성을 올릴 수 있다.
• 사용법:

useCallback( 함수 로직, [ 의존성 배열 ] )

useMemo

• useMemo 는 연산된 결과를 담는 변수의 값을 저장한다.
• 사용법:

function Count({ number }) {

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

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

• useMemo 에는 총 두개의 인자값을 받아올 수 있다!

첫번째 인자로는 적용할 연산 함수를 넣어준다.
두번째 인자로는 적용할 변수를 배열로 감싸준다.

Memo

• memo 는 컴포넌트를 메모이제이션 하는 기능이다. memo 로 감싸진 컴포넌트의 결과를 저장시킨 후, 새로 렌더되는 결과가 저장된 결과와 같다면 해당 컴포넌트를 재렌더 하지 않게 한다.

• 사용법:

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

export default React.memo(Students)