React - ant-design 4버전과 5버전의 차이

1. border-radius의 default값이 2px에서 2,4,6,8 px중 하나로 변경되었다. 

예를 들어 Button의 default값은 2px에서 6px로 변경되었다.

기본색 또한 #1890ff에서 #1677ff로 변경되었다.

 

2. css에 대한 변경으로 css-in-Js를 채택하여서 기존 import를 할 때 antd/dist/antd.css를 사용 했던 것을 없앴다.

기본 스타일을 재설정 해야 하는 경우 importantd/dist/reset.css를 import하여 사용하면 된다.

 

3. LocaleProvider는 4버전에서 더 이상 사용되지 않기에 5버전에서 관련 폴더 antd/es/locale-provider 및 antd/lib/locale-provider를 제거했다.

 

4. 기본 제공 Moment.js를 Dayjs로 바꿧다.

 

5.IE 브라우저를 더 이상 지원하지 않는다.

 

6. dropdownClassName이 popupClassName으로 통합되었다.

그래서 dropdownClassName과 다른 비슷한 API들도 대체될 것이다.

• AutoComplete
• Cascader
• Select
• TreeSelect
• TimePicker
• DatePicker
• Mentions

import { Select } from 'antd';

  const App: React.FC = () => (
    <Select
-     dropdownClassName="my-select-popup"
+     popupClassName="my-select-popup"
    />
  );
  export default App;

 

7. visible API가 open으로 통합되었다.

• Drawer visible -> open.
• Modal visible -> open.
• Dropdown visible -> open.
• Tooltip visible -> open.
• Tag visible 제거
• Slider tooltip 관련된 API가 tooltip property로 수렵되었다.
• Table filterDropdownVisible -> filterDropdownOpen.

  import { Modal, Tag, Table, Slider } from 'antd';

  const App: React.FC = () => {
    const [visible, setVisible] = useState(true);

    return (
      <>
-       <Modal visible={visible}>content</Modal>
+       <Modal open={visible}>content</Modal>

-       <Tag visible={visible}>tag</Tag>
+       {visible && <Tag>tag</Tag>}

        <Table
          data={[]}
          columns={[
            {
              title: 'Name',
              dataIndex: 'name',
-             filterDropdownVisible: visible,
+             filterDropdownOpen: visible,
            }
          ]}
        />

-       <Slider tooltipVisible={visible} />
+       <Slider tooltip={{ open: visible }} />
      </>
    );
  }

  export default App;

 

8. 모든 getPopupContainer는 고유한 div를 반환하는데 이 메서드는 React 18 동시모드에서 반복적으로 호출된다.