React: Objects are not valid as a React child 해결

증상

Error: Objects are not valid as a React child (found: object with keys {name, age}).
If you meant to render a collection of children, use an array instead.

원인

JSX의 {} 안에는 문자열·숫자·JSX 요소·배열만 넣을 수 있습니다. 객체를 그대로 넣으면 React가 화면에 표시할 수 없어 오류가 납니다.

const user = { name: '연욱', age: 20 };
return <div>{user}</div>; // ✕ 객체를 직접 렌더

자주 겪는 경우: Date 객체, API 응답 객체, error 객체를 그대로 출력.

해결

1) 객체의 특정 속성을 꺼내 출력

return <div>{user.name} ({user.age})</div>; // ○

2) 배열은 map으로 요소 배열을 만들기

return (
  <ul>
    {users.map((u) => <li key={u.id}>{u.name}</li>)}
  </ul>
);

3) 디버깅용으로 통째로 보고 싶다면 문자열화

return <pre>{JSON.stringify(user, null, 2)}</pre>;

4) 에러/날짜 객체

<span>{error.message}</span>      {/* error 객체 X → .message */}
<span>{date.toLocaleString()}</span> {/* Date 객체 X → 문자열로 */}

규칙: JSX {} 안에는 "화면에 그릴 수 있는 값"만. 객체라면 어떤 속성을 보여줄지 골라 문자열/숫자로 꺼내세요.