→←↑↓
📌⚠️

📌 lazy

lazy를 사용하면 컴포넌트가 처음 렌더링될 때까지 해당 컴포넌트의 코드를 로딩하는 것을 지연할 수 있다.

Reference

import { lazy } from 'react';

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

Parameters
load(fn) : () => import('./MarkdownPreview.js')

• Promise(또는 then 메서드를 가진 객체)를 반환하는 함수
  반환된 컴포넌트를 처음 렌더링하려고 할 때까지 load를 호출하지 않는다.
  load가 호출되면 Promise가 resolve될 때까지 기다린 후 resolve된 결과의 .default 속성을 React 컴포넌트로 렌더링한다.
  반환된 Promise와 resolve된 결과는 캐싱되기 때문에 load는 한 번만 호출한다.
  만약 Promise가 reject된다면 React는 그 오류를 가장 가까운 Error Boundary로 전달하여 처리한다.

Returns

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

load function

Returns

• lazy 안에 넘기는 함수는 Promise를 반환해야하며
  Promise는 .default 속성 안에 컴포넌트가 들어있는 객체로 resolve되어야 함.

Lazy-loading components with Suspense

정적 import 선언

import MarkdownPreview from './MarkdownPreview.js';

동적 import 선언

import { lazy } from 'react';

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

이제 요청에 따라 컴포넌트의 코드가 로딩되므로 로딩하는 동안 표시할 항목도 지정해야 합니다. lazy 컴포넌트 또는 해당 부모 컴포넌트 중 하나를 <Suspense> 경계 Boundary로 감싸서 이 작업을 수행할 수 있다.

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

📌 memo

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

Reference

memo(Component, arePropsEqual?)

import { memo } from 'react';

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

컴포넌트를 memo로 감싸면 해당 컴포넌트의 메모된Memoized 버전을 얻을 수 있다.

useMemo를 알고 있다면 memo의 공식문서 내용도 크게 다른 점이 없기에
여기까지만 작성함

📌 use (아 일단 보류 ) 모르겠음

Next.js 15의 param을 내리다보면 use를 써야한다는 경고가 나오는데
이번 기회에 use를 한번 제대로 파봐야겠다.

use는 Promise나 Context와 같은 데이터를 참조하는 React API이다.

const value = use(resource);

import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...

다른 React Hook과 달리 use는 조건문과 반복문 내부에서 호출할 수 있다.
단, use는 컴포넌트 또는 Hook에서만 호출해야 한다.

• Promise와 함께 호출될 때, use API는 Suspense와 Error Boundary와 통합

• use를 호출한 컴포넌트는 전달된 Promise가 대기(pending) 상태인 동안 suspend(멈춤)된다.

• 만약 use를 호출한 컴포넌트가 Suspense 경계로 감싸져 있다면 fallback이 표시된다.

• Promise가 resolve되면 Suspense의 fallback은 use API를 통해 반환된 데이터를 사용하는 컴포넌트로 교체됩니다.

• 만약 use에 전달된 Promise가 reject되면, 가장 가까운 Error Boundary의 fallback이 표시됩니다.