React런타임
Objects are not valid as a React child — 객체를 직접 렌더
Objects are not valid as a React child (found: object with keys {...})한 줄 해결: JSX 에 문자열·숫자·엘리먼트가 아닌 객체/배열을 직접 넣어 발생하며, 객체의 특정 필드를 꺼내거나 .map 으로 펼쳐야 합니다.
이런 증상일 때
데이터를 화면에 표시할 때 "Objects are not valid as a React child"와 함께 어떤 키를 가진 객체인지 표시됩니다. API 응답 객체나 Date 객체를 그대로 {} 안에 넣은 경우가 흔합니다.
원인
- {user} 처럼 객체 전체를 JSX 에 렌더(문자열 필드 {user.name} 이 아니라)
- Date 객체를 그대로 출력(문자열 변환 없이)
- 비동기 응답이 배열일 거라 가정했는데 객체가 와서 직접 렌더
해결 방법
1
필드만 꺼내기
객체가 아니라 표시할 문자열/숫자 필드를 렌더합니다.
// 잘못: <p>{user}</p>
<p>{user.name}</p>2
배열은 map 으로
리스트는 .map 으로 엘리먼트 배열로 변환하고 key 를 줍니다.
{items.map(it => <li key={it.id}>{it.title}</li>)}3
Date·객체는 문자열화
Date 는 toLocaleString(), 복잡한 객체는 JSON.stringify 로 변환해 표시합니다.
<time>{date.toLocaleDateString('ko-KR')}</time>💡 예방: API 응답 타입을 TypeScript 로 명시하면 객체를 직접 렌더하는 실수를 컴파일 단계에서 잡을 수 있습니다.
ReactJSXrendermap객체