[React 공식문서로 공부하기6] lazy와 memo

리액트 공식문서를 읽고 정리한 d글입니다. 
https://react-ko.dev/reference/react/lazy

 

 

Lazy(load)

lazy를 사용하면 처음 렌더링 될 때까지 컴포넌트 코드의 로딩을 지연시킬 수 있다.

 

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

 

 

이 코드는 번들러나 프레임워크의 지원이 필요할 수 있는 dynamic import()에 의존한다. 이 패턴을 사용하려면 lazy component를 default 내보내기로 해야함. 

Lazy의 매개변수 load

• Promise 또는 thenable(then 메서드를 가진 Promise와 유사한 객체)을 반환하는 함수. React는 반환된 컴포넌트를 처음 렌더링하고 시도할 때까지 load를 호출하지 않는다. (나 이말이 잘 이해가 안감...) React는 먼저 load를 호출한 후 resolve될 때까지 기다린 다음, resolve된 값의 .default를 React 컴포넌트로 렌더링한다. 반환된 Promise 및 Promise의 resolve된 값은 모두 캐시되므로 React는 load를 두 번이상 호출하지 않음. Promise가 reject되면 React는 가장 가까운 Error Boundary에 reject된 이유를 throw한다. 

Lazy의 반환값

• 트리에 렌더링할 수 있는 React 컴포넌트를 반환한다. lazy 컴포넌트의 코드가 로드되는 동안 렌더링을 시도하면 일시 중단된다. 로딩하는 동안 로딩 표시기를 보여주려면 <Suspense> 사용할 것 

<Suspense fallback={<Loading />}>
  <h2>Preview</h2>
  <MarkdownPreview />
 </Suspense>

 

Lazy 컴포넌트는 모듈의 최상위 레벨에서 선언할 것. 

 

 

Memo

https://react-ko.dev/reference/react/memo

memo – React

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

 

• 메모화는 성능을 최적화하지만 보장된 것은 아니라 React는 여전히 리렌더링할 수도 있음. 
• memo는 새로운 React 컴포넌트를 반환한다. memo에 제공한 원본 컴포넌트는 기존과 동일하게 동작하지만 부모가 리렌더링하더라도 prop이 변하지 않는 한 React는 이를 리렌더링하지 않는다. -> 이러한 컴포넌트를 메모화되었다고 한다. 
• memo를 적용하더라도 컴포넌트의 state가 변경이 되거나 사용중인 context가 변경이 되면 리렌더링한다. 

 

memo를 사용하는 것이 좋을까? 

일반적으로 메모화는 불필요하나, 앱이 그림 편집기이고 (도형 이동과 같이) 대부분의 인터렉션이 세분화되어있다면 메모화가 매우 유용할 수 있음. 

• memo로 최적화하는 것은 컴포넌트가 정확히 동일한 props로 자주 렌더링이 되고 리렌더링 로직에 많은 비용이 들 때만 가치가 있음.