antd 여러가지

Popover가 띄워져있는 상태일 때 Modal을 실행시킬경우

• zindex때문에 백그라운드 효과가 자동으로 씌워지지 않음 즉 만드는 Modal에 zIndex={1100} 표시(기본 1000)

Table이 렌더링이 안될 경우

이 Ant-Design 테이블 데이터 자동 업데이트 문제를 해결하려면 관찰 가능한 값의 복제본으로 데이터 소스 값을 전달해야함
혹은 onchange 이벤트를 매번 실행시키는 방법도 가능

❌❌❌❌❌
<Table
     dataSource={source}
     pagination={pagination}
     onChange={handleChange}
/>

⭕⭕⭕⭕⭕
<Table
     dataSource={[...source]}
     pagination={pagination}
     onChange={handleChange}
/>

예시 참고

https://webisfree.com/2020-08-25/react-antd-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-datepicker-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

외부 클릭으로 모달창 등 닫히기 선택 여부 maskClosable

maskClosable=true가 기본값, false로 선택할 경우 밖을 눌러도 모달창이 닫히지 않음

<Modal maskClosable={false}>
  {/* Modal 내용 */}
</Modal>

DatePicker showToday관련 내용

설명에는 데이건 먼스건 전부 showToday사용 된다 해놓고 안됨 화남.
RangePicker의 경우

import { useState } from 'react';
import { DatePicker } from 'antd';

function App() {
  const [dateRange, setDateRange] = useState([]);

  const handleRangePickerChange = (dates) => {
    setDateRange(dates);
  };

  return (
    <DatePicker.RangePicker
      value={dateRange}
      onChange={handleRangePickerChange}
      showToday // showToday 옵션을 추가합니다.
    />
  );
}

export default App;

위와 같이 사용가능

Month의 이번달 선택의 경우 따로 버튼 만들어 사용

import { useState } from 'react';
import { DatePicker, Button } from 'antd';
import moment from 'moment';

function App() {
  const [monthPickerValue, setMonthPickerValue] = useState(moment());

  const handleMonthPickerChange = (date) => {
    setMonthPickerValue(date);
  };

  const handleSelectCurrentMonth = () => {
    setMonthPickerValue(moment());
  };

  return (
    <div>
      <DatePicker.MonthPicker
        value={monthPickerValue}
        onChange={handleMonthPickerChange}
      />
      <Button onClick={handleSelectCurrentMonth}>현재 달 선택</Button>
    </div>
  );
}

export default App;