[React] 성능 최적화 memo

# memo ?

• 특정값을 강제로 메모리에 할당해서 값을 재활용 (속도가 빨라짐)
• 메모이제이션을 많이 할수록 메모리 점유율을 강제로 늘려서 성능을 올림
• 자바스크립트 엔진의 Garbage Collection에서 제외됨 (안쓰는 메모리를 정기적으로 제거해서 메모리 최적화)

 

# 언제 사용할까?

• 부모 컴포넌트가 재호출되면 자식 컴포넌트는 변경되는 요소가 없음에도 불구하고 무조건 같이 재호출됨

 
 

# 기본 구조

export default memo(컴포넌트)

 

컴포넌트를 내보낼때 memo로 감싸준다.
 

# 예시

app.js 와 그 자식 컴포넌트로 예시를 들어보겠습니다
 
- app.js

import { useState } from 'react';
import Child from './Child';

function App() {
	const [Counter, setCounter] = useState(0);
	console.log('parent');

	return (
		<div>
			<h1>Parent</h1>
			<button onClick={() => setCounter(Counter - 1)}>감소</button>
			<button onClick={() => setCounter(Counter + 1)}>증가</button>
			<p>{Counter}</p>
			<Child />
		</div>
	);
}

export default App;

 
 
- Child.js

function Child() {
	console.log('child');
	return <h2>Child</h2>;
}

export default Child;

이제 + - 인 버튼을 눌러보면 
콘솔 창에

parent
child

라고 나오는데
 
parent 컴포넌트말고 자식컴포넌트 까지 호출 되는것을 볼수 있습니다
 

import { memo } from 'react';

function Child() {
	console.log('child');
	return <h2>Child</h2>;
}

export default memo(Child);

이제 memo 를 추가해서 테스트 해보니
 
자식은 호출이 안되는 것을 볼 수 있습니다.