React) react bootstrap / 이미지 경로 설정 + public폴더의 사용

react bootstrap 사용해보기

get started - npm 방식으로 추가 - css추가 (import방식 app.js / link방식 public/index.html)

1. 쓰고자하는 ui를 골라 사용하고

function App(){
	return(
    	<div className="App">
        	<Button variant="primary">버튼</Button>
        </div>
    )
}

2. 상단에 해당 컴포넌트를 import해주기

import {Button} from 'react-bootstrap';

---

이미지 경로 설정 + public폴더의 사용

css파일로 backgrond설정의 방법 외에,
index.html에 따로 이미지를 삽입하는 방식을 알아보자.

html상에서 image추가 ( src/img 내 image )

1. import 작명 from '이미지경로'
우선 이미지를 가져와서 사용해야하니, import로 별칭을 만들어 끌고오고

import 작명 from './img/bg.png'  //현재 src/img/bg.png 존재하는 상황

2. 필요한 곳에 이미지 작명 한 것을 변수처럼 사용.

<div style={{backgroundImage="url(" + 작명 + ")"}}></div>

근데, 그럼 이미지가 100개가 필요하면
100번 동안 모두 작명해서 import해서 써야하나요...?
이럴 때 유용한 방식 👉 public폴더 사용
public폴더는 build될 때 유일하게 압축되지않는다.

html상에서 image추가_경로 ( public 내 image)

/이미지이름 하면 public내의 image경로를 바로 불러온다.

<div style={{backgroundImage="/shoes2.jpg"}}></div>

하지만 주의점이 있는데,
만약 페이지 경로를 /와 같은 상대경로로 잡을 경우
서브페이지에 발행되거나 할 때 자신의 파일 경로를 잡지 못하는 경우가 있을 수 있다. 따라서

process.env.PUBLIC_URL로 경로를 자세히 설정해주는 것이 안전하다.

<div style={{backgroundImage= process.env.PUBLIC_URL + "shoes2.jpg"}}></div>