[Code Camp 7주차] memoization

FE 08김우중·2022년 8월 24일
0

관리자 페이지를 떠올려봤을때.. 수많은 데이터를 보여주는데 데이터를 한 번 클릭하거나 바꿀때 수많은 데이터가 다시 리렌더링 되면서 속도가 굉장히 느려진다.
이럴때 필요한 부분만 리렌더링 될 수 있게 성능 최적화를 해주는것으로 memoization 이라고 부른다

Memo

// memo를 사용하여 부모가 리렌더링될 때 자식이 리렌더링 되는걸 막을수 있음
import { memo } from "react";

function MemoizationChildPage() {
  console.log("자식이 렌더링됩니다!!");
  return (
    <>
      <div>=================================</div>
      <h1>저는 자식 컴포넌트 입니다. </h1>
      <div>=================================</div>
    </>
  );
}

export default memo(MemoizationChildPage);

- useMemo

// useMemo로 변수를 기억할수있음
const aaa = useMemo(() => Math.random(), [])

- useCallback

// useCallback으로 함수 기억
const onClickCount = useCallback(() => {
	-----
})
profile
새내기 개발자

0개의 댓글