App

App (앱 래퍼)

컴포넌트는 애플리케이션 최상위에서 message, notification, modal 같은 정적 메서드를 컨텍스트로 사용할 수 있게 해 주고, .ant-app 요소를 기준으로 리셋 스타일도 제공해요.

출처: 문서

본문

언제 사용하나요

  • .ant-app 요소를 기준으로 한 리셋 스타일을 제공해요.
  • useApp의 message/notification/Modal 정적 메서드를 contextHolder를 직접 작성하지 않고 사용할 수 있어요.

예제 (Examples)

기본 (Basic)

message, notification, modal 인스턴스를 가져와요.

import React from 'react';
import { App, Button, Space } from 'antd';

// Sub page
const Page: React.FC = () => {
  const { message, modal, notification } = App.useApp();

  const showMessage = () => {
    message.success('Success!');
  };

  const showModal = () => {
    modal.warning({
      title: 'This is a warning message',
      content: 'some messages...some messages...',
    });
  };

  const showNotification = () => {
    notification.info({
      title: 'Notification topLeft',
      description: 'Hello, Ant Design!!',
      placement: 'topLeft',
    });
  };

  return (
    <Space wrap>
      <Button type="primary" onClick={showMessage}>
        Open message
      </Button>
      <Button type="primary" onClick={showModal}>
        Open modal
      </Button>
      <Button type="primary" onClick={showNotification}>
        Open notification
      </Button>
    </Space>
  );
};

// Entry component
export default () => (
  <App>
    <Page />
  </App>
);

Hooks config

message, notification의 전역 설정이에요.

import React from 'react';
import { App, Button, Space } from 'antd';

// Sub page
const Page: React.FC = () => {
  const { message, notification } = App.useApp();

  const showMessage = () => {
    message.success('Success!');
  };

  const showNotification = () => {
    notification.info({
      title: 'Notification',
      description: 'Hello, Ant Design!!',
    });
  };

  return (
    <Space wrap>
      <Button type="primary" onClick={showMessage}>
        Message for only one
      </Button>
      <Button type="primary" onClick={showNotification}>
        Notification for bottomLeft
      </Button>
    </Space>
  );
};

// Entry component
export default () => (
  <App message={{ maxCount: 1 }} notification={{ placement: 'bottomLeft' }}>
    <Page />
  </App>
);

사용 방법

기본 사용

App은 Context를 통해 상·하위 메서드 호출을 제공해요. useApp은 하위 컴포넌트로 사용해야 하므로, 애플리케이션의 최상위에 App을 감싸는 것을 권장해요.

import React from 'react';
import { App } from 'antd';

const MyPage: React.FC = () => {
  const { message, notification, modal } = App.useApp();
  message.success('Good!');
  notification.info({ title: 'Good' });
  modal.warning({ title: 'Good' });
  // ....
  // other message, notification, modal static function
  return <div>Hello world</div>;
};

const MyApp: React.FC = () => (
  <App>
    <MyPage />
  </App>
);

export default MyApp;

주의: App.useApp은 반드시 App 아래에서 사용할 수 있어요.

ConfigProvider와의 순서

App 컴포넌트는 ConfigProvider 안의 토큰만 사용할 수 있어요. Token을 사용해야 한다면 ConfigProvider와 App 컴포넌트는 반드시 쌍으로 등장해야 해요.

<ConfigProvider theme={{ ... }}>
  <App>
    ...
  </App>
</ConfigProvider>

내장 사용 시나리오 (필요하지 않다면 중첩은 피하세요) {#embedded-usage-scenarios}

<App>
  <Space>
    ...
    <App>...</App>
  </Space>
</App>

전역 시나리오 (redux 시나리오) {#global-scene-redux}

// Entry component
import { App } from 'antd';
import type { MessageInstance } from 'antd/es/message/interface';
import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
import type { NotificationInstance } from 'antd/es/notification/interface';

let message: MessageInstance;
let notification: NotificationInstance;
let modal: Omit<ModalStaticFunctions, 'warn'>;

export default () => {
  const staticFunction = App.useApp();
  message = staticFunction.message;
  modal = staticFunction.modal;
  notification = staticFunction.notification;
  return null;
};

export { message, modal, notification };

// sub page
import React from 'react';
import { Button, Space } from 'antd';

import { message } from './store';

export default () => {
  const showMessage = () => {
    message.success('Success!');
  };

  return (
    <Space>
      <Button type="primary" onClick={showMessage}>
        Open message
      </Button>
    </Space>
  );
};

API

공통 props 참고: Common props

이 컴포넌트는 [email protected]부터 사용할 수 있어요.

App

속성 설명 타입 기본값 버전 전역 설정
component 렌더링할 요소를 설정. false면 DOM 노드를 만들지 않음 ComponentType | false div 5.11.0 ×
message Message 전역 설정 MessageConfig - 5.3.0 ×
notification Notification 전역 설정 NotificationConfig - 5.3.0 ×

디자인 토큰 (Design Token)

전역 토큰 (Global Token)

토큰 이름 설명 타입 기본값
colorText W3C 표준을 준수하는 기본 텍스트 색. 가장 어두운 중성색이기도 함. string
fontFamily Ant Design의 폰트 패밀리는 시스템 기본 인터페이스 폰트를 우선하며, 화면에 적합한 대체 폰트 라이브러리 세트를 제공해 플랫폼과 브라우저에서 폰트의 읽기 편의성을 유지한다. 친근하고 안정적이며 전문적인 특성을 반영. string
fontSize 디자인 시스템에서 가장 널리 사용되는 폰트 크기. 텍스트 그라데이션이 여기서 파생됨. number
lineHeight 텍스트의 줄 높이. number

FAQ

<App component={false}> 안에서 CSS Var가 동작하지 않아요 {#faq-css-var-component-false}

Ant Design v6는 기본적으로 CSS 변수를 사용해요. App은 자신의 CSS 변수 클래스 이름을 담을 유효한 HTML 요소가 필요해요. component가 false면 App은 루트 DOM 노드를 렌더링하지 않고 context만 제공하므로, App 루트 클래스 이름이나 기본 스타일이 적용되지 않아요. 이 모드에서는 className, rootClassName, style 속성을 적용할 수 없고 개발 경고가 발생해요. 이런 스타일이 필요하다면 기본 div를 유지하거나 다른 유효한 요소를 지정하세요.

더 알아보기 (Learn more)