Skip to main content

Mounted

컴포넌트가 브라우저에 mount 되었을 때 children이 나타나게 해주는 컴포넌트입니다. 즉, children을 렌더링하는 환경이 클라이언트 환경임을 보장할 수 있습니다. mount 전에는 fallback으로 넣어준 컴포넌트를 보여줍니다.

SSR 환경에서 컴포넌트가 브라우저에 마운트되기 전과 후의 컴포넌트를 다루기 위해 사용할 수 있습니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface MountedProps {
  fallback?: JSX.Element;
}

const Mounted: ({
  fallback = <></>
}: PropsWithChildren<MountedProps>) => JSX.Element;

Usage

typescript
import { Mounted } from '@modern-kit/react'

const Example = () => {
  return (
    <Mounted fallback={<div>mount가 완료되기 전입니다.</div>}>
      <div>mount가 완료되었습니다.</div>
    </Mounted>
  );
};

Example

mount가 완료되기 전입니다.

Code
Interface
Usage
Example