빈 상태

빈 상태 (Empty)

데이터가 없는 상황에서 사용자에게 친절하게 안내해 주는 컴포넌트예요. 비어 있는 화면을 그냥 두지 않고, 상황에 맞는 힌트와 동작을 보여줄 수 있어요.

출처: 문서

본문

언제 사용하나요 (When To Use)

• 제공할 데이터가 없을 때, 친근한 안내 문구를 보여줄 때 사용해요.
• 완전히 새로운 상황에서 무언가를 만들도록 유도하는 사용자 튜토리얼에서도 쓰여요.

예시 (Examples)

기본 (Basic)

가장 단순한 사용법이에요.

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

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

export default App;

이미지 선택 (Choose image)

image에 Empty.PRESENTED_IMAGE_SIMPLE을 지정하면 다른 스타일의 이미지를 선택할 수 있어요.

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

const App: React.FC = () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;

export default App;

커스터마이즈 (Customize)

이미지 소스, 이미지 크기, 설명, 추가 콘텐츠를 자유롭게 꾸밀 수 있어요.

import React from 'react';
import { Button, Empty, Typography } from 'antd';

const App: React.FC = () => (
  <Empty
    image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
    styles={{ image: { height: 60 } }}
    description={
      <Typography.Text>
        Customize <a href="#API">Description</a>
      </Typography.Text>
    }
  >
    <Button type="primary">Create Now</Button>
  </Empty>
);

export default App;

ConfigProvider

ConfigProvider를 사용해 전역 Empty 스타일을 지정할 수 있어요.

import React, { useState } from 'react';
import { SmileOutlined } from '@ant-design/icons';
import {
  Cascader,
  ConfigProvider,
  Divider,
  List,
  Select,
  Space,
  Switch,
  Table,
  Transfer,
  TreeSelect,
} from 'antd';

const customizeRenderEmpty = () => (
  <div style={{ textAlign: 'center' }}>
    <SmileOutlined style={{ fontSize: 20 }} />
    <p>Data Not Found</p>
  </div>
);

const style: React.CSSProperties = { width: 200 };

const App: React.FC = () => {
  const [customize, setCustomize] = useState(true);
  return (
    <>
      <Switch
        unCheckedChildren="default"
        checkedChildren="customize"
        checked={customize}
        onChange={setCustomize}
      />
      <Divider />
      <ConfigProvider renderEmpty={customize ? customizeRenderEmpty : undefined}>
        <Space vertical style={{ width: '100%' }}>
          <h4>Select</h4>
          <Select style={style} />
          <h4>TreeSelect</h4>
          <TreeSelect style={style} treeData={[]} />
          <h4>Cascader</h4>
          <Cascader style={style} options={[]} showSearch />
          <h4>Transfer</h4>
          <Transfer />
          <h4>Table</h4>
          <Table
            style={{ marginTop: 8 }}
            columns={[
              { title: 'Name', dataIndex: 'name', key: 'name' },
              { title: 'Age', dataIndex: 'age', key: 'age' },
            ]}
          />
          <h4>List</h4>
          <List />
        </Space>
      </ConfigProvider>
    </>
  );
};

export default App;

시맨틱 DOM 스타일링 (Custom semantic dom styling)

classNames와 styles로 객체나 함수를 전달해 Empty의 시맨틱 DOM 스타일을 커스터마이즈할 수 있어요.

import React from 'react';
import type { EmptyProps, GetProp } from 'antd';
import { Button, Empty, Flex } from 'antd';
import { createStaticStyles } from 'antd-style';

const emptySharedProps: EmptyProps = {
  image: Empty.PRESENTED_IMAGE_SIMPLE,
  children: <Button type="primary">Create Now</Button>,
};

const classNames = createStaticStyles(({ css }) => ({
  root: css`
    border: 1px dashed #ccc;
    padding: 16px;
  `,
}));

const stylesObject: EmptyProps['styles'] = {
  root: { backgroundColor: '#f5f5f5', borderRadius: '8px' },
  image: { filter: 'grayscale(100%)' },
  description: { color: '#1890ff', fontWeight: 'bold' },
  footer: { marginTop: '16px' },
};

const stylesFn: EmptyProps['styles'] = ({ props }): GetProp<EmptyProps, 'styles', 'Return'> => {
  if (props.description) {
    return {
      root: { backgroundColor: '#e6f7ff', border: '1px solid #91d5ff' },
      description: { color: '#1890ff', fontWeight: 'bold' },
      image: { filter: 'hue-rotate(180deg)' },
    };
  }
  return {};
};

const App: React.FC = () => {
  const emptyClassNames: EmptyProps['classNames'] = {
    root: classNames.root,
  };

  return (
    <Flex vertical gap="medium">
      <Empty
        {...emptySharedProps}
        description="Object styles"
        classNames={emptyClassNames}
        styles={stylesObject}
      />
      <Empty
        {...emptySharedProps}
        description="Function styles"
        classNames={emptyClassNames}
        styles={stylesFn}
      />
    </Flex>
  );
};

export default App;

설명 없이 (No description)

설명 없이 가장 단순하게 사용하는 방법이에요.

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

const App: React.FC = () => <Empty description={false} />;

export default App;

API

공통 props는 Common props를 참고해요.

<Empty>
  <Button>Create</Button>
</Empty>

내장 이미지 (Built-in images)

• Empty.PRESENTED_IMAGE_SIMPLE

• Empty.PRESENTED_IMAGE_DEFAULT

시맨틱 DOM (Semantic DOM)

시맨틱 DOM 구조는 https://ant.design/components/empty/semantic.md 에서 확인할 수 있어요.

디자인 토큰 (Design Token)

글로벌 토큰 (Global Token)

더 알아보기 (Learn more)

• Empty 컴포넌트 문서
• ConfigProvider로 전역 스타일 설정하기
• common props 살펴보기