App.js 파일
/*eslint-disable*/
import logo from './logo.svg';
import { useState } from 'react';
import './App.css';
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import data from './data.js';
function App() {
let [shoes] = useState(data)
return (
<div className="App">
<Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Cart</Nav.Link>
</Nav>
</Container>
</Navbar>
<div className="main-bg"></div>
<div className="container">
<div className="row">
<div className="col-md-4">
< img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"></img>
<h4>{shoes}</h4>
<p>상품설명</p>
</div>
<div className="col-md-4">
< img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%"></img>
<h4>상품명</h4>
<p>상품설명</p>
</div>
<div className="col-md-4">
< img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%"></img>
<h4>상품명</h4>
<p>상품설명</p>
</div>
</div>
</div>
</div>
);
}
export default App;
data.js 파일
let data = [
{
id : 0,
title : "White and Black",
content : "Born in France",
price : 120000
},
{
id : 1,
title : "Red Knit",
content : "Born in Seoul",
price : 110000
},
{
id : 2,
title : "Grey Yordan",
content : "Born in the States",
price : 130000
}
]
export default data;
두 파일 입력하고나서
<h4>{shoes}</h4> shoes를 전달하는 순간
Uncaught Error: Objects are not valid as a React child (found: object with keys {id, title, content, price}). If you meant to render a collection of children, use an array instead
에러가 계속 발생하는데 이유를 모르겠습니다. 강의 코드랑 다른점이없는데..
