React.Memo / useMemo

김민기·2023년 7월 17일
0

1. React.Memo/useMemo

React.Memo와 useMemo는 둘 다 리액트에서 성능을 최적화하기 위해 사용하는 것이다. 하지만 둘 사이에는 사용방식과, 사용용도에 차이점이 있다.

1. React.Memo

1. 함수형 컴포넌트의 리렌더링 성능을 최적화하기 위해 사용한다.

예를 들어, 부모 컴포넌트에서 자식컴포넌트에게 동일한 props를 전달하면 리렌더링이 되지만 React.Memo를 사용할 경우 동일한 props를 전달 받으면 이전에 렌더링된 결과를 사용하여 렌더링을 건너뛰게 된다. React.Memo는 동일한 결과값을 반환할 때 유용하게 사용된다.

2. useMemo

1. useMemo는 이전에 계산된 결과를 재사용하는데 사용한다.

만약 동일한 연산을 반복하는 함수가 있다고한다면, useMemo를 사용한다면 숫자가 변경되지 않는한 그 결과를 메모제이션을 한 후, 이전에 계산된 결과를 다시 사용할 수있다.

3. 차이점

  1. React.memo는 컴포넌트 자체를 메모이제이션하여 리렌더링을 건너뛰지만, useMemo는 특정 값 또는 계산 결과를 메모이제이션하여 재사용한다.
  2. React.memo는 컴포넌트의 props가 변경되었는지 여부를 확인하여 리렌더링을 방지하지만, useMemo는 의존성 배열에 명시된 값이 변경되었을 때에만 재계산을 수행한다.

0개의 댓글

관련 채용 정보