Objects are not valid as a React child (found: [object Date]).

HMJ·2025년 1월 22일

Objects are not valid as a React child (found: [object Date]). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (http://localhost:3000/static/js/bundle.js:15364:11)
    at reconcileChildFibersImpl (http://localhost:3000/static/js/bundle.js:15679:9)
    at http://localhost:3000/static/js/bundle.js:15691:31
    at reconcileChildren (http://localhost:3000/static/js/bundle.js:17064:115)
    at beginWork (http://localhost:3000/static/js/bundle.js:17835:1565)
    at runWithFiberInDEV (http://localhost:3000/static/js/bundle.js:13128:14)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:20372:93)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:20266:38)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:20250:7)
    at performWorkOnRoot (http://localhost:3000/static/js/bundle.js:20011:42)

일정을 짜는 기능을 만드는 도중에, 에러가 떴다....
정확하게는 react-calendar를 사용하여, 한국 시간대에 맞춘 마크와 타임테이블을 만들려고 하는 도중에 꼬여서 에러가 발생했다.

이 오류가 발생한 이유는 React가 렌더링 과정에서 Date 객체를 화면에 출력하려고 했기 때문이다. React는 문자열, 숫자, React 엘리먼트는 렌더링할 수 있지만, Date 객체는 직접 렌더링할 수 없다.

const MyComponent = () => {
	const now = new Date();		// Date 객체 생성
  	return <div>{now}</div>;	// Date 객체를 렌더링하려고 함 -> 오류 발생
};

위의 코드에서 now는 Date 객체이고, React는 이를 문자열로 변환하지 않으면 DOM에 출력할 방법을 모르기 때문에 오류가 발생한다.

React는 DOM의 텍스트 노드에 데이터를 삽입할 때 내부적으로 문자열만 처리한다. 하지만 Date 객체는 JavaScript에서 복잡한 데이터 구조를 가지며, 이를 단순한 문자열로 출력하려면 명시적으로 변환해야 한다.

React에서 Date 객체를 화면에 표시하려면 문자열로 변환해야 한다. JavaScript에서는 Date 객체를 문자열로 변환하는 여러 가지 방법을 제공한다.

1. toString() 메서드

기본적으로 사람이 읽을 수 있는 형식으로 변환
const now = new Date();
console.log(now.toString());	// "Wed Jan 22 2025 15:30:00 GMT+0900 (Korean Standard Time)"
2. toLocalDateString() 메서드

날짜를 특정 Local(ex: 한국 등) 형식으로 변환
const now = new Date();
console.log(now.toLocalDateString("ko-KR"));	// ex: "2025. 1. 22."
3. toISOString() 메서드

Date 객체를 표준 YYYY-MM-DDHH:mm:ss.sssZ 형식의 문자열로 변환
const now = new Date();
console.log(now.toISOString());	// ex: "2025-01-22T06:30:00.000Z"