[REACT] 6_앱 Card 컨텐츠 구성 2

앱 카드 컨텐츠 구성

로컬 json 데이터 생성 후 배열내의 각 객체들을 반복문으로 출력한다.

 

api/shoes1.json

[	
  {	
    "id": 0,	
    "title": "White and Black",	
    "name": "화이트 앤 블랙",	
    "content": "Born in France",	
    "price": 120000,	
    "image": "https://codingapple1.github.io/shop/shoes1.jpg",	
    "qty": 0	
  },	
  {	
    "id": 1,	
    "title": "Red Knit",	
    "name": "레드 니트",	
    "content": "Born in Seoul",	
    "price": 110000,	
    "image": "https://codingapple1.github.io/shop/shoes2.jpg",	
    "qty": 0	
  },	
  {	
    "id": 2,	
    "title": "Grey Yordan",	
    "name": "그레이 요르단",	
    "content": "Born in the States",	
    "price": 130000,	
    "image": "https://codingapple1.github.io/shop/shoes3.jpg",	
    "qty": 0	
  }	
]

 

App.js

import logo from './logo.svg';	
import './App.css';	
import { Navbar, NavDropdown, Nav, Container } from 'react-bootstrap';	
import Shoes1 from './api/shoes1.json';	
import { useState } from 'react';	
	
function App() {	
  let [ shoes, setShoes ] = useState(Shoes1);	
  return (	
    <div className="App">	
      {/* NavBar */}	
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">	
        <Container>	
          <Navbar.Brand href="/">React-Bootstrap</Navbar.Brand>	
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />	
          <Navbar.Collapse id="responsive-navbar-nav">	
            <Nav className="me-auto">	
              <Nav.Link href="/">Home</Nav.Link>	
              <Nav.Link href="#pricing">Pricing</Nav.Link>	
              <NavDropdown title="Dropdown" id="collasible-nav-dropdown">	
                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>	
                <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>	
                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>	
                <NavDropdown.Divider />	
                <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>	
              </NavDropdown>	
            </Nav>	
            <Nav>	
              <Nav.Link href="#login">로그인</Nav.Link>	
              <Nav.Link eventKey={2} href="#join">	
                회원가입	
              </Nav.Link>	
            </Nav>	
          </Navbar.Collapse>	
        </Container>	
      </Navbar>	
      {/* jumbotron */}	
      <div class="bg-light p-5 rounded-lg">	
        <h1 class="display-4">Hello, world!</h1>	
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>	
        <hr class="my-4" />	
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>	
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>	
      </div>	
      {/* card contents */}
      <div className='container'>
        <div className='row'>
          {
            shoes.map((obj, i) => {
              return <Card key={i} i={i} shoes={shoes} />
            })
          }
        </div>
      </div>
      {/* more button */}	
    </div>	
  );	
}	
	
function Card(props) {	
  return (	
    <>	
      <div className='col-md-4'>	
        <img src={ props.shoes[props.i].image } alt="신발" width="100%" />	
        <h3>{ props.shoes[props.i].title }</h3>	
        <p>{ props.shoes[props.i].content } & { props.shoes[props.i].price }</p>	
      </div>	
    </>	
  )	
}	
	
export default App;

---