useMemo, React.memo

• 함수 컴포넌트가 리렌더링 되는 경우 3가지
1. 자신의 상태가 변경될 때
2. 부모 컴포넌트의 상태가 변경될 때
3. 부모 컴포넌트로 부터 받는 prop이 변경될 때

• 두번째 인자로 지정한 대상이 변경될 때만 연산을 해서 새롭게 값을 Return한다.. ⇒ 결국 값이다!

• 변경되지 않으면 아무리 리렌더링 되어도 연산하지 않고, 이전에 메모제이션한 값을 return한다

• 두번째 인자(dependency)
• 코드 내에서 참조된 모든 반응형 값들의 목록
• props, state, (컴포넌트 바디에 직접 선언된 모든) 변수와 함수가 될 수 있음

function con({a,b,c}) {
	const message = useMemo(()=>{
		console.log(a,b,c)
		return "memo"
	},[a,b,c])
}

• 빈배열이면 첫 렌더링때만 실행됨

function con() {
	const message = useMemo(()=>{
		console.log("first")
		return "memo"
	},[])
}

• 아무것도 주지 않으면 일반 함수와 같게 됨

function con() {
	const message = useMemo(()=>{
		console.log("click")
		return "memo"
	})
}

 

const Box = React.memo(()=>{
	return <div />
})