React.memo

yhko1992·2022년 2월 22일
0

REACT JS - BASIC

목록 보기
16/26

todo를 React.memo로 한층 더 최적화 가능하다!?!?

그렇다 알고리즘의 memoization 개념을 차용한것이다.

사실 todo가 변경될때 , 변경된 todo만 선별적으로 랜더링하면 되는데 변경되지 않은, 아니 변경하지 않아도 되는 다른 todo까지 함께 랜더링 되어서 비효율적이다. 아래와 같이 말이다.

마지막 todo를 지우면 지워진 todo만 없어지면 되는데 위의 todo까지 모두 랜더링 된다.

그럼 memo를 적용해보자. 참고로 React.memo는 HOC이다. 즉, 랜더링 되는 컴포넌트를 감싸야한다.

정말 간단하다. 그냥 랜더링 되는 자식 컴포넌트에 memo를 입혀주면 된다.(React.pureComponent와 거의 비슷하다고 한다)

그럼 passed된 props가 변경되지 않으면 이미 memo에 저장되어있는 컴포넌트를 사용하는것이다.

// todo.js

import { memo } from 'react';

function Todo({ id, completed, task }) {
  
  console.log('TODO RENDERING', task);
  
  blah
  blah
  blah
}
export default memo(Todo);

그럼 아래와 같이 랜더링 된다.

이로써 한층 업그레이드 된 todo이다.

단, 불필요하게 리랜더링 된다는 확신이 있을때 사용해야한다. 왜냐면, 말그대로 컴퓨터 메모리에 저장하기 때문에 확신도 없이 여기저기 다 사용하면 성능저하나 의도치 않은 버그가 발생할 수 있기 때문이다.

아 그리고 함수형 컴포넌트안에서 Hook으로도 사용가능하다. 이때는 useMemo를 사용하면 된다.

profile
'과연 이게 최선일까?' 끊임없이 생각하기

0개의 댓글