[TIL]10月20日Memoization

stateを使用してstate値を変更すると、構成部品が再レンダリングされます.
このような過程で、必ず描き直さなければならないstateがあり、描き直す必要のないstateがある場合は、描き直す必要のないstateを描き、不要な無駄かもしれません.
Memoizationは、ある特定の演算や関数の値を記憶した後、状態の変化によって素子を再レンダリングしても、既存の値を記憶する機能です.
Memoizationにより、不要な構成部品の再レンダリングを低減することができ、より高速な性能変化が期待される.
Memoization(useCallback, useMemo, memo)
Reactで利用可能なMemoizationは3種類(useCalback,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( 함수 로직, [ 의존성 배열 ] )