React의 bootstrap과 img관리

리액트에선 bootstrap가 따로 있다. 그래서

npm install react-bootstrap bootstrap@5.1.3
//혹은 yarn을 사용한다면
yarn add react-bootstrap bootstrap@5.1.3

이런 식으로, bootstrap을 깔아서 사용할 수 있다. 그러고

index.html에 

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

을 써줘야 모든 기능을 다 이용할 수 있다.

 

사용할 땐

import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
//리액트 상단에 이렇게 모두 inport해줘야 가능함 (대문자들은 다 import하기)
<Navbar bg="light" expand="lg">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</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">Link</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-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>
        </Navbar.Collapse>
      </Container>
</Navbar>

 

리액트에서 img는 src폴더나 public폴더에 보관하는 두 가지 방법이 있다.

src폴더에 넣으면 파일명이 변경되며 압축된다.

public폴더에 넣으면 보존된다. 그리고 절대경로/파일명.jpg로 주소를 다 써야 가져올 수 있다. 

 

그리고 src에 변수를 넣으려면 src={}이렇게 해서 변수명 함수명을 넣을 수 있다.

<img src={"https://codingapple1.github.io/shop/shoes"+ i +".jpg"}  />

이런 식으로, 주소에 +를 이용해 i를 더해서 변수명을 입력할 수 있다. i도 부모에서 받아오려면 역시 props를 사용해야 한다.