관리자 페이지를 떠올려봤을때.. 수많은 데이터를 보여주는데 데이터를 한 번 클릭하거나 바꿀때 수많은 데이터가 다시 리렌더링 되면서 속도가 굉장히 느려진다.
이럴때 필요한 부분만 리렌더링 될 수 있게 성능 최적화를 해주는것으로 memoization 이라고 부른다
Memo
// memo를 사용하여 부모가 리렌더링될 때 자식이 리렌더링 되는걸 막을수 있음
import { memo } from "react";
function MemoizationChildPage() {
console.log("자식이 렌더링됩니다!!");
return (
<>
<div>=================================</div>
<h1>저는 자식 컴포넌트 입니다. </h1>
<div>=================================</div>
</>
);
}
export default memo(MemoizationChildPage);
// useMemo로 변수를 기억할수있음
const aaa = useMemo(() => Math.random(), [])
// useCallback으로 함수 기억
const onClickCount = useCallback(() => {
-----
})