React 이미지 넣는 법 & public 폴더

css 에서 배경사진 넣는건

./이미지경로 하면됨

background-image : url('./bg.png');

---

html 안에서 src 폴더의 이미지를 넣고 싶으면

이미지를 import 해오고 사용해야함

import bg from './bg.png'  // 여기서 import 해오고

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

1. import 작명 from './이미지경로' 한 다음에

2. 이미지경로가 필요한 곳에서 작명한걸 사용하면됨

img태그 쓰고싶으면 <img src={bg}/> 이렇게 하면됨 귀찮으면 css파일 이용하자~

---

public 폴더의 용도

여러가지 소스코드는 src 폴더에 보관하면 되는데

이미지같은 static 파일의 경우 public 폴더에 보관해도됨

형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js 파일은 그럴일 거의 없고

이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관 ㄴ ㄴ

---

public 폴더에 있는 이미지 사용할 땐

<img src="/logo192.png" /> 

그냥 /이미지경로 사용하면 됨

페이지에 이미지 100장 넘게 써야되는데 import 100번 할거임? public 폴더에 밀어 넣으면 되지

근데 권장되는 방식은 따로있음

<img src={process.env.PUBLIC_URL + '/logo192.png'} /> 

이렇게 해야되는데 이유는 react로 만든 html 배포할때 jawoong.com 경로에 배포하면 문제 없는데

jawoong.com/어쩌구/ 경로에 배포하면 파일 못찾을 수 있음

그래서 /어쩌구/ 를 뜻하는 process.env.PUBLIC_URL 이것도 더해주면 된다구하네요