Day.js TIL

오늘의 회고

동행 페이지가 마무리 단계이다. 이제 그 동안 신경을 못썻던 css를 만져보자.

Day.js

antd의 datepicker를 사용하다가 오늘 이전 날은 선택이 안되게 disabled를 하고 싶었다. antd의 예시코드를 보던 중 처음보는 라이브러리가 있었다.
import dayjs from 'dayjs';

Day.js는 가볍고 간단한 문법으로 많이 사용되고 있는 JavaScript 라이브러리다.

설치

npm: npm i dayjs
yarn: yarn add dayjs

예시

antd의 datepicker

import React from 'react';
import dayjs from 'dayjs';
import { DatePicker, Space, ConfigProvider } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import koKR from 'antd/es/locale/ko_KR';

interface CalendarProps {
  setPartnerDates: React.Dispatch<React.SetStateAction<string[]>>;
}

const { RangePicker } = DatePicker;

function PartnerCalendar({ setPartnerDates }: CalendarProps) {
  const getDateHandle = (dateString: any) => {
    setPartnerDates(dateString);
  };
  
  // 오늘 이전 날들을 disabled
  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
    return current && current < dayjs().startOf('day');
  };

  return (
    <ConfigProvider locale={koKR}>
      <Space direction="vertical" size={12}>
        <RangePicker disabledDate={disabledDate} onChange={getDateHandle} />
      </Space>
    </ConfigProvider>
  );
}

export default PartnerCalendar;

기술면접

질문 - useRef에 대해 설명해주세요.
키워드(react hook, 저장공간, DOM 참조)
useRef는 DOM 요소에 접근할 수 있도록 하는 React Hook입니다.
ref 값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지할 수 있습니다.
이러한 특징 덕분에 ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용됩니다.