Objects are not valid as a React child오류해결

React component를 렌더링할때 데이터를 화면에 표시하려면 표시하려는 데이터 타입에 맞는

데이터를 넣어주어야한다. 컴포넌트를 통해서 전달된 데이터와 표시하려는 데이터의 타입이 

일치해야만한다.

 

나의 경우는

배열데이터 객체를 넣어서 타입이 안맞아서 화면에 표시되지않았다.

또한

첫번째 인자에 모든 값이 다들어가서 에러는 찾는데에 시간을 많이 썼다..

 

이렇게 하위 컴포넌트인 Movie함수에  props를전달하였는데 이상하게 값이 전부

id에 들어갔다 객체의 형태로..

이유를 모르겠어서 왜그런가 생각해보니 이 예제로 알게되었다..

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="green"/>
  );
}

export default App;

hello.js

import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;

 

두개의 props를 전달하였는데 받는곳은 첫번째 인자에 다 들어간다!

그러면 어떻게 해결하는가??

-->비구조화 할당을 통해서 해결했다.

비구조화할당은 예제로 알아보자 비구조화할당으로 보면 

[a,b]=[3,4]   ==> a=3,b=4 

이거와 같다

이거를 사용해서 오류를 해결할수있었다!

이렇게 비구조화할당을하면 첫번째인자에 모든 정보가 들어가지 않아서 해결이 되었다!~~