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( 함수 로직, [ 의존성 배열 ] )

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