[React] Ant Design DatePicker(RangePicker)와 Moment.js를 사용한 날짜별 필터링 기능 구현

Ant-Design을 사용하여 Admin Page를 개발하는 중, Ant Design에서 제공하는 DatePicker를 사용하여 날짜별 데이터 필터링 기능을 구현하였다. 

 

우선 데이터를 날짜별로 필터링 하기 위해서는 API 에 GET요청을 보낼 때 query에 startDate, endDate를 String(YYYY-MM-DD) 형식으로 담아서 보내주면 됐다. 

먼저 시작일과 종료일을 한 번에 받으려면, Antd가 제공하는 RangePicker를 사용해주면 된다.

 

 const {RangePicker} = DatePicker

DatePicker를 먼저 import 해준 뒤, DatePicker가 제공하는 RangePicker를 꺼내 사용한다.

 

 <RangePicker onCalendarChange={handleChange} />
        <Button type="primary" icon={<SearchOutlined />} style={{marginLeft: '10px'}} onClick={handleSubmit}>
          Search
        </Button>

위와 같이 날짜 조회 버튼과 제출 버튼을 생성해줄 수 있다. onCalendarChange에 함수를 걸어주면 함수의 파라미터로 Moment 객체를 받을 수 있다. 

 

  const handleChange = useCallback((e: any) => {
    if (e) {
      setStartDate(moment(e[0]).format('YYYY-MM-DD'))
      setEndDate(moment(e[1]).format('YYYY-MM-DD'))
    } else {
      setStartDate(undefined)
      setEndDate(undefined)
    }
  }, [])

이후 나는 momentJS를 사용하여 받은 Moment 객체를 API query 양식에 맞게 변경해주었다. \

 

handleSubmit 함수에서는 navigate로 쿼리를 주어 날짜별 필터링 기능을 구현할 수 있었다.