[React] memo, useMemo

 

memo

컴포넌트가 업데이트 될 떄, 

재실행 되지 않아도 되는 자식 컴포넌트들이 모두 업데이트 되는 경우가 있다. 

memo로 함수를 코드를 감싸주면

memo가 이전 prop 값과 새로 받을 prop값을 비교한 후 , 값이 같으면 memo가 막아준다

이는 부모컴포넌트에 의해 실행되었을 떄만 관련이 있고 내부의 상태값과는 관련이 없다.

 

 

const Child = memo(function Child({text}){


	return <><p>{text}</p></>
});

export default Child

 

즉 

 자식 컴포넌트에서 관리하는 상태값이 바뀐 경우 > 컴포넌트 재실행

 부모 컴포넌트가 재실행됐는데,  보내주는 속성값이 바뀐 경우 > 컴포넌트 재실행  

 부모 컴포넌트가 재실행됐는데,  보내주는 속성값이 같은경우 > 컴포넌트 재실행 X (memo 가 제한)

 

주의 

- 최대한 상위 트리에 속한 컴포넌트를 감싸는 것을 권장 => 그 하위에 속하는 컴포넌트들도 재실행이 되지 않음

- memo를 남용하면 리액트는 컴포넌트 함수를 실행하기 전에 항상 prop값을 확인하는 일을 수행해야 하므로 성능에 영향을 준다.

 

useMemo

컴포넌트 함수 내에 불려와진 일반 함수의 실행을 막기 위한 hook

컴포넌트 함수 내에 일반 함수를 감싸준다

복잡한 계산이 있을 때만 사용됨

 

function calculate(num){

	// 복잡한계산...
    return result;

} 

const Child = memo(function Child({text,num}){

	const calculateResult = useMemo(() => calculate(num),[num]);
    
	return <><p>{text}</p></>
});

export default Child

 

 

 

react는

첫번째 인자 - 실행할 함수 ( react는 함수의 결과를 저장)

두번째 인자 - 의존성 ( 비어있을 시 재실행되지 않음)

 

주의 

 

- useMemo 또한 남용하면 리액트는 함수를 실행하기 전에 항상 값을 비교하는 일을 수행해야 하므로 성능에 영향을 준다.

- 소요 시간이 긴 복잡한 계산 함수에만 사용하도록 한다.