부트스트랩 react , 퍼블릭 이미지

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

 

이곳에서 get Started를 누르면 설치 명령어 등이 나온다.

 

참고로 css경로를 잡아준 뒤에 import를 시켜서 예제 컴포넌트 등을 사용할 수 있다.

 

예: 

import logo from './logo.svg';
import './App.css';
import {Navbar,Container,Nav,Button} from 'react-bootstrap';


function App() {
  return (
    <div className="App">
     <Navbar bg="dark" data-bs-theme="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 type="submit">Button</Button>{' '}


    </div>
  );
}

export default App;

 

이미지도 src 아래에 있다면 import해서 사용해야 한다. 그치만 매번 경로를 가져오는 이미지가 어떤것일 줄 모르는데 import 시킬 수 있을까? 

 

리액트는 빌드되면 모두 public 폴더에 변환되어 올라간다. html,css,js 등으로 변환된다. 이미지도 그렇다 이미지를 public에 넣으면 바로 경로로 불러올 수 있게 된다.

 

https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system

Using the Public Folder | Create React App

 

기본 문서에 따르면 

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

해당 public 경로는 이렇게 잡아주길 권장한다.