2023-04-26

오늘의 숙제 :

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

2. 컴포넌트만들면 그 안에 데이터바인딩도 아마 다시해야겠군요

3. 반복적인 html이나 컴포넌트를 발견하면 연습삼아 map 반복문을 써봅시다.

function App() {

  let [shoes] = useState(data);
  // console.log(shoes);

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

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

      <Container>
       <Row>
        {
          shoes.map(function(a , i={i}){
            return(
              <Content shoes={shoes}/>
            )
          })
        
        }

       </Row>
     </Container>
 
    </div>
  );
}

function Content(props){
  return(
  <Col sm>
   <img src={process.env.PUBLIC_URL + "/img/shoes1.jpg"} width="80%"/>
   <h4>{props.shoes[0].title}</h4>
   <p></p>
   </Col>) 
 }

export default App;

컴포넌트 만들고, 데이터 바인딩 하고 맵으로 돌려서 잘 나오기도 하는 데 그림, shoes안에 title, content를 어떻게 뽑아와야할지 고민이 됨.

위 그림처럼 나옴