Mount

Mount는 children을 함수로 받거나 Promise를 반환할 수 있게 해, 비동기 결과가 준비되면 렌더링합니다. Promise가 해결되는 동안 fallback을 보여주고 오류는 onError로 전달합니다.

function Mount(props: {
  children: React.ReactNode | (() => React.ReactNode | Promise<React.ReactNode>);
  fallback?: React.ReactNode;
  onError?: (error: unknown) => void;
}): React.ReactNode;

기본 사용법#

children 함수에서 React 노드 또는 Promise를 반환해 렌더링 시점을 지연할 수 있습니다.

import { Mount } from '@ilokesto/utilinent';

function UserPanel() {
  return (
    <Mount fallback={<span>Loading...</span>}>
      {async () => {
        const user = await fetch('/api/user').then((res) => res.json());
        return <div>{user.name}</div>;
      }}
    </Mount>
  );
}

에러 처리#

onError로 예외나 Promise 거부를 처리하고 안전한 fallback UI를 제공합니다.

<Mount
  fallback={<div>Unable to load.</div>}
  onError={(error) => console.error('Mount failed:', error)}
>
  {() => {
    if (Math.random() > 0.5) {
      throw new Error('Oops');
    }
    return <div>Mounted</div>;
  }}
</Mount>

DOM 구조 유지 및 레이아웃 안정성#

Mount.div 같은 태그 변형을 사용하면 래퍼 요소를 유지하면서 내용만 교체할 수 있습니다.

<Mount.section fallback={<Skeleton />}>
  {async () => <Profile />}
</Mount.section>