「リカバリ」チェックアウト、チェックアウトステータスの反映、およびCallbackの使用

objectにキー値は存在しません。

カレンダーの日付配列を生成するときにobject形式で作成します.

ex) [{day: '21', beforeDay=false}, {day: '22', beforeDay=false}, ...]

また、毎月の開始曜日が異なるため、unshiftを使用して空白を埋めると、未定義の値があるため、キー値にアクセスする際にエラーが発生します.

arr.unshift(...new Array(firstDay))

ただし、空白領域をobject形式で埋め込むとエラーは発生しません.

// 변경된 방식
arr.unshift(...new Array(firstDay).fill(0).map((v, i) => ({})));

勘定を締める

ホームページでチェックイン、チェックアウトに変更しました.
このためには、次の条件が必要です.

1.チェックイン日が空白（カレンダーに表示されるスペース）の場合

この場合、カレンダーの並べ替えを作成する際に、day日付を空白に設定するので、容易に判断できます.

// Calendar.js
<div
  data-dateformat={`${monthData.year}-${monthData.month}-${date.day}`}
  css={dateBtn({ date })}
  key={`${monthData.year} + ${i}`}
  onClick={e => handleDatePick(e.target, date.beforeDay)}
  >
  {date.day}
</div>

// CalendarContainer.js
const handleDatePick = (target, beforeDay) => {
  const pickedDate = target.dataset.dateformat.split('-');
  const day = pickedDate[2];
  if (day === 'undefined') return; // 공백인 칸
};

2.今日より早いチェックイン

同様に、この場合、以前の日付もboolean値として記憶されているので、判断できる.

// Calendar.js
<div
  data-dateformat={`${monthData.year}-${monthData.month}-${date.day}`}
  css={dateBtn({ date })}
  key={`${monthData.year} + ${i}`}
  onClick={e => handleDatePick(e.target, date.beforeDay)}
  >
  {date.day}
</div>

// CalendarContainer.js
const handleDatePick = (target, beforeDay) => {
  /* 생략... */
  if (beforeDay) return; // 이전 날짜
};

3.チェックアウトがチェックアウトより早い場合

まず、チェックアウトはチェックイン日を設定しなければなりません.
チェックアウトを設定すると、既存のチェックアウトはtimeStamp形式で保存されるため、チェックアウト日とチェックアウト日を比較し、事前にチェックアウト日に変更します.

const handleDatePick = (target, beforeDay) => {
  /* 생략... */
  const timeStamp = new Date(`${pickedDate[0]}-${padding(pickedDate[1])}-${padding(pickedDate[2])}`,
  );
 
  if (!checkInDay || timeStamp < checkInDay) {
    console.log('체크인 날짜 설정...');
    changeCheckInOutDay('checkIn', timeStamp);
  } else {
    console.log('체크아웃 날짜 설정...');
    changeCheckInOutDay('checkOut', timeStamp);
  }
};

上記で使用した존재하지 않는 key값이더라도 undefined 값을 리턴は、const timeStamp = new Date('2021-10-01');においてtimeStampとして管理されていれば非常に有用な結果となる.

useCallback

検索ウィンドウで場所を検索するときに遅くなります...
原因Date객체의 메서드를 사용할 수 있기 때문が不必要なレンダリングを行っていることが確認された.SingleCalendar 컴포넌트です.

<Calendar
  leftMonth={leftMonth}
  rightMonth={rightMonth}
  setMonth={setMonth}
  handleDatePick={handleDatePick}
/>

上に新しく追加されたhandleDatePick関数は、レンダリングのたびに新しく作成されるため、この関数を受信したサブアセンブリ이유는 리렌더링시마다 새로 생성되는 상위 컴포넌트의 함수때문は、値が変更されたと判断し、不要な再レンダリングを行っている.
では、SingleCalendar 컴포넌트を使用して、レンダリング時に不要な関数を再生することを防止する必要があります.useCallbackは値を返し、useMemoは関数を返すため、関数を再利用するためにuseCallbackが使用される.

const handleDatePick = useCallback(
  (target, beforeDay) => {
    const pickedDate = target.dataset.dateformat.split('-');
    const timeStamp = new Date(
      `${pickedDate[0]}-${padding(pickedDate[1])}-${padding(pickedDate[2])}`,
    );
    const day = pickedDate[2];

    if (beforeDay) return;
    if (day === 'undefined') return;

    if (!checkInDay || timeStamp < checkInDay) {
      console.log('체크인 날짜 설정 중');
      changeCheckInOutDay('checkIn', timeStamp);
    } else {
      console.log('체크아웃 날짜 설정 중');
      changeCheckInOutDay('checkOut', timeStamp);
    }
  },
  [checkInDay, checkOutDay],
);

ここではuseCallbackのように,2番目のパラメータの依存状態値を用いることに注意し,useMemoを用いると所望の結果が得られる.