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.

번역) 오류: 객체가 React 자식으로 유효하지 않습니다(발견됨: {name, age} 키가 있는 객체). 하위 컬렉션을 렌더링하려는 경우 대신 배열을 사용하십시오.

---

해결방법

react 컴포넌트의 템플릿 부분에서 JavaScript 객체를 렌더링하려고 하면 위와 같은 오류가 발생한다. React 자식으로는 객체가 유효하지 않기 때문에, 렌더링할 경우 배열을 이용하라는 오류이다.
객체를 배열로 바꾸면 해당 오류는 발생하지 않는다.

const obj = {age: 2, city: 'anyang'}
const arr = [1,2,3]

return (
	<div>
    	{obj}	//	<- 오류 발생
        {arr}	//	<- 오류 발생하지 않음
    </div>
)

이와 같은 원인으로는 React에서 객체안의 다양한 key-value값중 어떤걸 어떻게 표현해야 하는지 명시되지 않았기 때문에 오류가 발생한다고 참고문서 에서 확인할 수 있다