React Study - React.memo()

React.memo를 사용하면 컴포넌트의 props가 변경되지 않았을 때 리렌더링을 건너뛸 수 있다.

= 컴포넌트의 props가 바뀔 때만 리렌더링 한다. (항상 보장되지 않는다.)

 

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

memo로 감싸져 있는 컴포넌트는 메모화된 버전의 컴포넌트를 만들 수 있다.

메모화된 버전의 컴포넌트는 일반적으로 props가 변경되지 않는다면, 부모 컴포넌트가 리렌더링 될 때 같이 리렌더링 되지 않는다.

memoization이 성능을 최적화하지만, 항상 보장되는 것이 아니므로, React는 여전히 컴포넌트를 렌더링 할 수도 있다.

 

예시:

import { memo } from 'react';

const SomeComponent = memo(function SomeComponent(props) {
  // ...
});

export type TelViewProps = {
  isLogin: () => boolean;
  onClick: () => void;
};

const TelView: React.FC<TelViewProps> = ({ ...props }) => {
  return (
   ...
  );
};

export default React.memo(TelView);

 

 

Parameters

 

- Components : 메모화하려는 컴포넌트. memo는 이 컴포넌트를 수정하지 않고, 새로운 메모화된 컴포넌트를 반환한다.
                         함수와 forwardRef 를 포함한 모든 React 컴포넌트가 포함될 수 있다.

- optional arePropsEqual : 이전 컴포넌트의 props와 새로운 props, 두 가지 인자를 받는 함수
                                           새로운 props = 이전 props : true 반환
                                           즉, 컴포넌트가 렌더링한 결과가 이전과 같고, 동일하게 동작할 때

 

 

Returns

 

- memo는 새로운 React 컴포넌트를 반환한다.

- props가 변경되지 않는 한, React가 부모를 리렌더링 할 때 항상 리렌더링을 하지 않는다는 점을 제외하면, memo에 제공된 컴포넌트와(원본 컴포넌트) 동일하게 동작한다.

 

 

 

Usage

 

> props 안바뀌면 리렌더링 건너뛰기

 

React는 일반적으로 부모가 리렌더링할 때마다 컴포넌트를 리렌더링한다. 

memo를 사용하면 이전 props와 현재 props가 동일할 때, 부모가 리렌더링되도 컴포넌트를 리렌더링 하지 않는 컴포넌트를 만들 수 있다. 이러한 컴포넌트를 "메모화되었다"고 한다.

 

컴포넌트 메모화 하는 방법 : 기존 컴포넌트를 memo로 감싸기.

const Greeting = memo(function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
});

export default Greeting;

 

React 컴포넌트는 순수한 렌더링 로직을 항상 따른다. 이것은 props, state, context가 바뀌지 않으면 항상 동일한 결과를 반환해야 한다는 것을 의미한다.

memo를 사용하게 되면, React에게 이를 준수한다고 알리므로, React는 props가 바뀌기 전까지 리렌더링을 할 필요가 없어진다.

 

예를 들어, 위 예제에서 Greeting 컴포넌트는 name이 바뀔 때마다 리렌더링이 된다.

 

 

 

🔎  메모화를 사용하는 것이 유용한 경우

 

- 인터렉션이 세분화 되어 있는 경우 (ex. 그림 편집기 도형 이동)

- props로 자주 리렌더링되고, 리렌더링 로직 비용이 많이 들 때

- 컴포넌트에 전달되는 props가 항상 바뀐다면 사용하는 것이 의미가 없다!

- 종종 useMemo, useCallback과 함께 사용된다.

 

 

[참고 사항]

memoization을 한 경우에도 상태가 업데이트 되는 경우

(1) state가 변경될 때

메모화된 컴포넌트도 자체 state가 변경되면 리렌더링 된다.

 

(2) context가 변경될 때

사용중인 context가 변경되면 리렌더링된다. 메모화는 부모에서 전파된 Props에만 관심이 있다.

 

(3) props 변경 최소화하기

memo를 사용하려면 props 변경 시간을 최소화한다.

→ useMemo를 사용해서 부모 컴포넌트가 매번 상태를 업데이트 해주는 것을 방지하자.

https://rachelslab.tistory.com/141