INDEX

1. 오늘 할 일
2. import export 문법
3. 길고 복잡한 state 다른 파일로 뺍시다
4. 길고 복잡한 state 데이터바인딩

숙제

1. 상품목록 컴포넌트화
2. 상품명 데이터바인딩
3. 반복적인 부분은 map 반복문 써보기

1. 오늘 할 일

   <aside> 💡 1. 오늘 만든 상품목록을 컴포넌트로 만들어봅시다. 컴포넌트도 길면 다른 파일로 빼도 상관없음

   1. 컴포넌트만들면 그 안에 데이터바인딩도 아마 다시해야겠군요
   2. 반복적인 html이나 컴포넌트를 발견하면 연습삼아 map 반복문을 써봅시다. </aside>

2. import, export 문법

   import './App.css';
   import { Navbar, Container, Nav } from 'react-bootstrap';
   import { useState } from 'react';
   **import data from './data.js';**
   
   function App() {
     **let [shoes] = useState(data);**
   
     return (
       <div className='App'>
         <Navbar bg="dark" variant="dark">
           <Container>
             <Navbar.Brand href="/">Navbar</Navbar.Brand>
             <Nav className="me-auto">
               <Nav.Link href="/">Home</Nav.Link>
               <Nav.Link href="/cart">Cart</Nav.Link>
             </Nav>
           </Container>
         </Navbar>
         <div className='main-bg'></div>
         <div className="container">
           <div className="row">
             <div className="col-md-4">
               <img src={process.env.PUBLIC_URL + '/img/shoes1.jpg'} width="80%" />
               <h4>상품명</h4>
               <p>상품정보</p>
             </div>
             <div className="col-md-4">
               <img src={process.env.PUBLIC_URL + '/img/shoes2.jpg'} width="80%" />
               <h4>상품명</h4>
               <p>상품정보</p>
             </div>
             <div className="col-md-4">
               <img src={process.env.PUBLIC_URL + '/img/shoes3.jpg'} width="80%" />
               <h4>상품명</h4>
               <p>상품정보</p>
             </div>
           </div>
         </div>
       </div>
     );
   }
   
   export default App;
   

   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;
   

3. 길고 복잡한 state 데이터바인딩

   import './App.css';
   import { Navbar, Container, Nav } from 'react-bootstrap';
   import { useState } from 'react';
   import data from './data.js';
   
   function App() {
     let [shoes] = useState(data);
   
     return (
       <div className='App'>
         <Navbar bg="dark" variant="dark">
           <Container>
             <Navbar.Brand href="/">Navbar</Navbar.Brand>
             <Nav className="me-auto">
               <Nav.Link href="/">Home</Nav.Link>
               <Nav.Link href="/cart">Cart</Nav.Link>
             </Nav>
           </Container>
         </Navbar>
         <div className='main-bg'></div>
         <div className="container">
           <div className="row">
             <div className="col-md-4">
               <img src={process.env.PUBLIC_URL + '/img/shoes1.jpg'} width="80%" />
               **<h4>{shoes[0].title}</h4>
               <p>{shoes[0].content}</p>
               <p>{shoes[0].price}</p>**
             </div>
             <div className="col-md-4">
               <img src={process.env.PUBLIC_URL + '/img/shoes2.jpg'} width="80%" />
               **<h4>{shoes[1].title}</h4>
               <p>{shoes[1].content}</p>
               <p>{shoes[1].price}</p>**
             </div>
             <div className="col-md-4">
               <img src={process.env.PUBLIC_URL + '/img/shoes3.jpg'} width="80%" />
               **<h4>{shoes[2].title}</h4>
               <p>{shoes[2].content}</p>
               <p>{shoes[2].price}</p>**
             </div>
           </div>
         </div>
       </div>
     );
   }
   
   export default App;