React 최적화(1)-React.memo

'최적화'란 웹 서비스의 성능을 개선하는 기술

React.memo의 용법

const momoizedComp = React.memo(Comp)

Comp = 메모이제이션하려는 컴포넌트

 

목적 : 컴포넌트가 모든 상황에서 리렌더되지 않도록 하기 위함

 

React.memo는 인수로 전달한 컴포넌트를 메모이제이션된 컴포넌트로 만들어 반환

Props가 메모이제이션의 기준

 

React.memo가 반환하는 컴포넌트는 부모 컴포넌트에서 전달된 Props가 변경되지 않는 한 리렌더되지 않음

 

Props로 전달되는 값이 많을 때는 판별 함수를 인수로 전달해 Props의 특정 값만으로 리렌더 여부를 판단

const Comp = ({a, b, c}) => {
	console.log("출력!");
	return <div>Comp</div>
};

function areEqual(prevProps, nextProps) {
	if(prevProps.a === nextProps.a) {
    	return true;
     } else {
     	return false;
     }
}

const MemorizedComp = Reeact.memo(Comp, areEqual);

판별함수로 사용할 함수 areEqual에는 두 개의 매개변수 들어감 --> prevProps에는 이전 Props의 값, nextProps에는 바뀐 Props의 값

판별 함수가 true 반환 시 리렌더 X, 판별 함수가 false 반환하면 리렌더 O

반환되는 MemorizedComp는 전달되는 값 중 a가 변경될 때만 리렌더

 

 

 

 

의문점 

• props가 메모이제이션의 기준인데, react.memo에서 부모 컴포넌트에서 잔달된 props는 메모이제이션하려는 컴포넌트에 전달된 props인건가?