data.js의 변수를 useState()에 대입에 대한 질문입니다.

[이성훈]

/*eslint-disable*/
import './App.css';
import { Navbar, Container, Nav, Col, Row } from 'react-bootstrap'
import bg from './img/bg.png'
import { useState } from 'react';
import data from './data.js'

function App() {

let [shoes] = useState(data)
console.log(shoes[0].title)

return (
<div className="App">
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">shoesShop</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">shoes</Nav.Link>
<Nav.Link href="#pricing">shoes</Nav.Link>
</Nav>
</Container>
</Navbar>

<div className='main-bg' style={{ backgroundImage: 'url(' + bg + ')' }}></div>

<div>
<Container>
<Row>
<Col sm>

<h4>{shoes[0][0].title}</h4>
<p>{shoes[0][0].content}</p>
</Col>
<Col sm>

<h4>상품명</h4>
<p>상품설명</p>
</Col>
<Col sm>

<h4>상품명</h4>
<p>상품설명</p>
</Col>
</Row>
</Container>
</div>

</div>
 );
}

export default App;

let [ shoes] = useState(data)

console.log(shoes) <- 출력시 배열에 2번 둘러싸여 있는 

상태가 맞는지 궁금합니다. console.log 출력시 [ [ {..}, {..}, {..} ] ] 의 형태로

배열이 두번 감싸져 있어 <h4>{shoes[0][0].title}<h4>로 대입해서 사용중인데

원인이 뭔지 궁금합니다.

[codingapple]

data.js파일에 대괄호가 2개 있거나 그럴수도요?

[이성훈]

감사합니다 해결 완료했습니다!!!

[글쓴이]

글