[ TypeScript ] Date 객체를 React 컴포넌트에서 렌더링할 때 발생하는 타입 오류

📍 발생 원인 

현재 이와 같이 타입과 변수를 설정한 상태입니다.

interface Example {
  no: number;
  date: Date;
}

const exampleList: Example[] = [
  {
    no: 1,
    date: new Date(2025, 1, 7), // 2025년 2월 7일 (월은 0부터 시작)
  },
  
  (...생략...)
  
]

 

하지만, 이와 같이 값을 불러오려했더니 에러가 발생하였습니다.

return <p>{example.date}</p>; // ❌ Type 'Date' is not assignable to type 'ReactNode'.

 

 

💡 포인트

React에서 JSX 내부에서 {}를 사용하여 값을 출력할 때, ReactNode(문자열, 숫자, JSX 요소 등)로 변환할 수 있어야 합니다.

하지만 Date 객체는 ReactNode가 아니므로 JSX에서 직접 출력할 경우 타입 오류가 발생합니다.

 

 

---

✅ 해결 방법

1. 문자열로 변환 (toLocaleDateString() 사용)

<p>{date.toLocaleDateString()}</p>; // ✅ 정상 출력

 

2. ISO 형식으로 변환 (toISOString() 사용)

<p>{date.toISOString().split("T")[0]}</p>; // ✅ "YYYY-MM-DD" 형식으로 출력

 

3. 템플릿 리터럴로 변환 (toDateString() 사용)

<p>{`${date.toDateString()}`}</p>; // ✅ 정상 출력

 

 

---

✨ 원하는 형식으로 날짜 변환하기

저는 해결방법 1의 형태로 작성하였는데 제가 원하는 형태는 예를 들어 2025.02.07 의 형태였습니다.

 

이때,

toLocaleDateString()의 옵션을 사용하면 원하는 형식으로 날짜를 출력할 수 있습니다.

<p>
  {example.date
  .toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" })
</p>

 

👉 출력 결과

 

 

추가적으로 일자 뒤에 . 이 오는 것도 삭제하고 싶어서 코드를 한 번 더 수정해주었습니다.

.replace(/\.$/, "") → 마지막에 오는 점(.)을 찾아서 제거

<p>
  {example.date
    .toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" })
    .replace(/\.$/, "")}
</p>

 

👉 출력 결과