[RP] 2. React-Bootstrap, navbar 에서 만들었던 navbar를 사용하여 쇼핑몰 메인페이지를 만들어 보자.

1. 메인 페이지

• navbar를 불러온 상태에서 메인페이지를 다음과 같이 꾸며보자.

import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';

<Navbar bg="light" expand="lg">
  <Container>
    <Navbar.Brand href="#home">Dekay-Shop</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="me-auto">
        <Nav.Link href="#home">Home</Nav.Link>
        <Nav.Link href="#link">Detail</Nav.Link>
        <NavDropdown title="Dropdown" id="basic-nav-dropdown">
          <NavDropdown.Item href="#action/3.1">Github</NavDropdown.Item>
	  <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.2">Velog</NavDropdown.Item>
        </NavDropdown>
      </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>

<div className="background">
  <h1>Dekay Shop</h1>
  <p>Simple shop</p>
  <p>
    <Button variant="dark" href="https://github.com/daekyeongp" className="main-button">Github</Button>
    <Button variant="dark" href="https://velog.io/@daekyeong" className="main-button">Velog</Button>
  </p>
</div>

• 쇼핑몰 처럼? 보이기 위해 위의 코드처럼 작성했고 Dropdown의 버튼과 메인페이지의 버튼 모두 클릭하면 지정한 사이트로 이동한다.

2. 상품 나열하기

• 상품을 나열하기 위해서 다음과 같이 작성했다.

<div className="container">
  <div className="row">
    <div className="col-md-4">
      <img src={require('./image/shoes0.jpg').default} width="100%" />
      <h4>상품명</h4>
      <p>상품정보</p>
    </div>
    <div className="col-md-4">
      <img src={require('./image/shoes1.jpg').default} width="100%" />
      <h4>상품명</h4>
      <p>상품정보</p>
    </div>
    <div className="col-md-4">
      <img src={require('./image/shoes2.jpg').default} width="100%" />
      <h4>상품명</h4>
      <p>상품정보</p>
    </div>
  </div>
</div>

• 이제 각 상품에 대한 상품명, 상품정보, 가격을 넣고 싶은데 어떻게 할지 고민하다가 Javascript 파일에 저장해서 데이터를 불러오는 형식으로 작성해 보았다.

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;

• 위의 데이터 처럼 id, title, content, price와 같이 배열에 넣어 미리 javascript 파일로 저장해놓았고, useState 함수를 사용하여 데이터를 저장해서 불러오는 형식으로 코드를 수정했다.

import Data from './components/data.js';

let [shoes, setShoes] = useState(Data);

<div className="container">
  <div className="row">
    <div className="col-md-4">
      <img src={require('./image/shoes0.jpg').default} width="100%" />
      <h4>{ shoes[0].title }</h4>
      <p>{ shoes[0].content }</p>
      <p>{ shoes[0].price }</p>
    </div>
</div

• 위와 같은 형태로 3개 상품을 출력해보자.

Tip ✍

지금은 상품이 3개 밖에 없지만, 만약 상품이 많아질 경우에는 하드 코딩을 해야하는 걱정은 할 필요가 없다.❗
👉 상품을 보여주는 컴포넌트를 생성하고, 반복문을 통해 상품 개수만큼 컴포넌트를 생성해보자.

//component
function ShoesAdd(props){
  return (
    <div className="col-md-4">
      <img src={require('./image/shoes0.jpg').default} width="100%" />
      <h4>{ props.shoes.title }</h4>
      <p>{ props.shoes.content } & { props.shoes.price }</p>
    </div>
  )
}

• 위와 같이 상품을 생성하는 컴포넌트를 따로 생성하고 shoes에 상품 데이터가 배열 형태로 저장되어 있기 때문에 map 함수를 사용하여 반복문을 통해 상품 개수 만큼 생성해보자.

<div className="container">
  <div className="row">
    {
      shoes.map((shoes) => {
        return <ShoesAdd stitle={shoes} />
      })
    }
  </div>
</div

• map 함수를 통해 데이터 개수 만큼 반복하고 ShoesAdd 컴포넌트에 props로 shoes를 전달하기 때문에 정상적으로 화면이 출력되는 것을 확인할 수 있다.

역시 개발은 하면 할수록 실력이 올라간다는 말이 맞는 말인 것 같다.

첫 메인페이지를 생성해 보았는데 useState로 데이터를 조작하는게 점점 재밌어지고 익숙해지는 것 같다.😁

end