오늘의 React

1. bootStrap 사용

• 레이아웃을 복사붙여넣기식으로 편하게 개발가능한 Bootstrap 라이브러리
• npm install react-bootstrap bootstrap -부트스트랩 설치
• css로 커스터마이징 가능

//여기서 import해야 버튼 사용 가능하다.
import { Button, Navbar, Container, Nav } from 'react-bootstrap';
import './App.css';

function App() {
  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <Button variant="primary">Primary</Button>
    </div>
  );
}

export default App;

 

2. 이미지 넣기

• cs파일에선 그냥 ./이미지경로
• 1. JSX상에 이미지 넣으려면
  • import 작명 from "이미지경로"
  • style ={{ backgroundImage: "url ("+ 작명 +")"}}
• Bootstrap 이용해서 레이아웃 짜기(원조 bootstrap-조금 더 용량절약가능 )
• 외부 호스팅해둔 이미지라면 이미지 절대주소만 넣으면 된다.
• 2. Public 폴더 이용
  • 리액트는 사이트발행 전에 html, js, css 파일을 압축한다 (building)
  • 이미지 사용할 땐 /이미지경로
  • 주의점
    • pixelCoder.com/어쩌구/에 발행시 문제
    • 그래서 경로도 /어쩌구/이미지경로로 해야한다.(근데 이게 까다로우니까)
    • {process.env.PUBLIC_URL + '/이미지경로.png'} 를 사용하면 된다.

import 'bootstrap/dist/css/bootstrap.min.css';
//여기서 import해야 버튼 사용 가능하다.
import { Navbar, Container, Nav } from 'react-bootstrap';
import './App.css';
import bg from "./img/bg.png";

function App() {
  return (
    <div className="App">
      <Navbar bg="light" variant="light">
        <Container>
          <Navbar.Brand href="#home">흔한 패션</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#features">카테고리</Nav.Link>
            <Nav.Link href="#pricing">장바구니</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

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

      <div className="container">
        <div className="row">
          <div className="col-md-4">
            <img src="{process.env.PUBLIC_URL + '/shoes1.jpg'}" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
          <div className="col-md-4">
            <img src="/shoes2.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
          <div className="col-md-4">
            <img src="/shoes3.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;