Failed prop type: invaild prop value[0] of type String supplied to DataRangePicker, expcted instance of 'Date' 오류

오류 메시지:

Failed prop type: Invalid prop `value[0]` of type `String` supplied to `DateRangePicker`, expected instance of 'Date'

이 메시지는 다음과 같은 핵심 내용을 담고 있습니다:

• DateRangePicker에 넘긴 value의 항목이 Date 인스턴스가 아니라 문자열(string) 이라는 뜻입니다.
• 즉, selectRow.excludeDt = ['2025-06-11', '2025-06-12']처럼 문자열이 들어가 있었기 때문입니다.

---

✅ 1. 원인 분석

selectRow.excludeDt?.[0] = selectRow.excludeFromDt;

이 코드에서 selectRow.excludeFromDt와 selectRow.excludeToDt는 Date | undefined 타입으로 Date 객체여야 합니다.

하지만, 오류 메시지에 따르면, 해당 값들이 실제로 문자열로 들어간 상태인 것으로 보입니다.

📌 가능한 원인

• selectRow.excludeFromDt 또는 selectRow.excludeToDt가 이미 문자열이었을 가능성
• 데이터를 JSON에서 가져오면서 Date 객체가 string으로 파싱됐을 가능성
• 또는 alert(selectRow.excludeDt) 출력 시, Date 객체가 암묵적으로 문자열로 변환되었을 수도 있음

---

✅ 2. 해결 방법: Date 객체 보장하기

selectRow.excludeFromDt와 selectRow.excludeToDt가 문자열일 수도 있으므로, 다음과 같이 안전하게 Date로 강제 변환하세요:

function ensureDate(val: Date | string | undefined | null): Date | undefined {
  if (!val) return undefined;
  if (val instanceof Date) return val;
  const d = new Date(val);
  return isNaN(d.getTime()) ? undefined : d;
}

수정 코드:

if (!selectRow.excludeDt) {
  selectRow.excludeDt = [undefined, undefined];
}

selectRow.excludeDt[0] = ensureDate(selectRow.excludeFromDt);
selectRow.excludeDt[1] = ensureDate(selectRow.excludeToDt);

---

✅ 3. 최종 예시 (전체)

export declare type ValueType = [Date?, Date?];

export interface LineData {
  excludeDt: ValueType | undefined;
  excludeFromDt: Date | string | undefined;
  excludeToDt: Date | string | undefined;
}

const ensureDate = (val: Date | string | undefined): Date | undefined => {
  if (!val) return undefined;
  if (val instanceof Date) return val;
  const d = new Date(val);
  return isNaN(d.getTime()) ? undefined : d;
};

const selectRow: LineData = {
  excludeFromDt: '2025-06-11', // 혹은 new Date('2025-06-11')
  excludeToDt: '2025-06-12',
  excludeDt: undefined,
};

if (!selectRow.excludeDt) {
  selectRow.excludeDt = [undefined, undefined];
}

selectRow.excludeDt[0] = ensureDate(selectRow.excludeFromDt);
selectRow.excludeDt[1] = ensureDate(selectRow.excludeToDt);

// 이제 DateRangePicker에 안전하게 전달 가능
<DateRangePicker value={selectRow.excludeDt as [Date, Date]} />

---

✅ 결론

• DateRangePicker에는 반드시 Date 인스턴스를 넘겨야 합니다.
• string 또는 undefined가 들어오지 않도록 형 변환 또는 유효성 검사가 필요합니다.
• alert()는 Date 객체를 문자열로 출력하기 때문에, 실제 값이 Date인지 instanceof Date 또는 typeof 검사로 확인하세요.

---

필요하다면 해당 DateRangePicker 컴포넌트가 어떤 라이브러리인지 알려주시면 더 구체적인 예제로 도와드릴 수 있어요!