Memoization

Memoization(메모이제이션) 이란 ?

https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98

메모이제이션 memoization
기억되어야 할 것이라는 뜻의 라틴어에서 파생된 단어로, 컴퓨터 프로그램이 동일한 계산을 반복적으로 해야할 때, 이전에 계산한 값을 메모리에 저장하여 중복적인 계산을 제거하여 전체적인 실행 속도를 빠르게 해주는 기법으로 동적 계획법(DP; Dynamic Programming)의 핵심이 되는 기술이다.

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 에는 총 두개의 인자값을 받아올 수 있습니다.

첫번째 인자로는 적용할 연산 함수를 넣어줍니다.

두번째 인자로는 적용할 변수를 배열로 감싸줍니다.

useCallback

useCallback 은 함수를 메모이제이션 합니다.

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

메모이제이션된 함수는 재렌더 되더라도

함수를 새로 그려내지 않아 렌더 효율성을 올릴 수 있습니다.

---