Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.
1. 에러 발생한 이유
어떤 함수 컴포넌트에서 JSX를 return 할 때 JSX 요소의 child로 객체를 넣으면 위와 같은 에러가 발생하게 된다.
예를 들어,
App 컴포넌트에서 자식인 Child 컴포넌트로 props를 통해 데이터를 보내줄 때
/** App.js */
const [data, setData] = useState([]);
addData = (id, name) => {
// 이 방법이 맞음
setData(prevData => ...prevData, {id: id, name: name})
// 이 방법이 에러를 내게 됨
setData(prevData => ...prevData, {id: {id}, name: {name}})
}
<Child data={data} />
/** Child.js */
return <>
<div>{props.data.id} {props.data.name}</div>
</>App.js 에서 setData를 하는 과정 중에 {id} 를 값으로 넣게 되면
중괄호로 묶여있기 때문에 객체로 인식하게 되고 키값을 설정하지 않았지만
"id"={id} 로 인식하게 됨 (key, value 값이 같다면 값을 생략 가능하기 때문에)
마찬가지로 이름값 또한 "name"={name} 으로 인식하게 됨
만약 내가 id의 값으로 3, name의 값으로 Marine 을 넣었다면
{id = {id: 3}, name = {name: 'Marine'}} 이런 식으로 배열에 추가가 된다.
그래서 Child.js 에서 {props.data.id} 를 div 안에 출력하려고 했지만
그 값은 {id: 3} 이라는 객체로 들어오기 때문에 출력할 수가 없다.
2. 해결방법
따라서, 에러를 고치기 위해서는 아래 방법 중 하나를 택하여 소스를 수정할 수 있다.
1. `App.js` 에서 setData를 할 때 중괄호를 삭제한다.
2. `Child.js` 에서 `{props.data.id.id}` 이런 식으로 불러온다.
--> 당연히 말 안 됨! 1번 방법으로 가야함!JSX에서는 스크립트 함수나 변수를 가져오기 위해 중괄호를 적어줘야 하지만
return 이전에는 같은 스크립트문이니까 중괄호를 빼주자!
