[TIL]10월 20일 Memoization

state를 사용할때 state값이 변경되면 컴포넌트가 다시 렌더되게 된다.

이런 과정에서 꼭 다시 그려줘야하는 state가 있고 다시그려주지 않아도 되는 state가 있다고 할때 다시그려주지 않아도 되는 state까지 다시 그린다는건 불필요한 낭비일수 있다.

Memoization은 특정 연산이나 특정 함수의 값을 기억해놓은 후 state의 변화로 컴포넌트를 재렌더 하더라도 기존에 저장된 값을 그대로 사용하는 기능이다.

Memoization으로 컴포넌트의 불필요한 재렌더링을 줄여 좀더 빠른 성능변화를 기대할수 있다.

Memoization(useCallback, useMemo, memo)

React에서 사용할수 있는 Memoization은 총 3가지(useCallback, useMemo, memo) 이다.

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

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

export default React.memo(Students)

useMemo
연산된 결과를 담는 변수값을 저장

function Count({ number }) {

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

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

useCallback
함수를 메모이제이션

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