react 오류!

오류

---

• props로 데이터를 넘겨주고 자식 컴포넌트에서 넘겨준 데이터를 사용하려고 함.

//VideoListEntry.js 
import { fakeData } from './__test__/fakeData';
console.log(fakeData)
//const title = fakeData[0].snippet.title;

const VideoList = () => (
  <div className="video-list media">
    <VideoListEntry video={fakeData[0]} /> 
  </div>
);


//VideoListEntry.js
const VideoListEntry = (props) => 
(
  <div className="video-list-entry">
    <div className="media-left media-middle">
      <img className="media-object" src="https://i.ytimg.com/vi/dQw4w9WgXcQ/default.jpg" alt="" />
    </div>
    <div className="media-body">
      <div className="video-list-entry-title">{props.video}</div>
      <div className="video-list-entry-detail">Video Description</div>
    </div>
  </div>
);

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

오류 원인

---

1. props.video가 Object(객체)이기 때문에 문자열로 보여줄 수 없어서 뜨는 에러
   <div className="video-list-entry-title">{props.video}</div>
2. props로 넘겨줄 때 데이터 타입과 렌더링 되는 데이터 타입이 동일해야함. 동일하지 않으면 에러 발생. 즉, 컴포넌트로 전달된 데이터와 표시하려는 데이터의 타입이 일치하지 않으면 에러 발생

해결

---

위와 같은 에러는 오류 원인과는 다른 문제로 발생하는 문제였다. 해당 에러는 객체를 자식으로 두려고 해서 발생한 에러다. 내부적으로 React.createElement(tag, props, ...children) 을 동작시키는데 3번째 전달인자 ...children에 객체가 아닌 String 혹은 Array이가 되어야 하는 문제다.