React 이미지 파일 사용하기

HTML 안에 이미지 넣고 싶으면 이미지를 import 하고 사용해야한다. 

 

import bg from './bg.png'

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

1. import 이름 from './이미지경로' 하고

2. 이미지 경로가 필요한 곳에서 import 한 것 사용한다. 

 

<img> 태그 사용하고 싶으면 <img src={bg} /> 사용한다. 

css 파일 사용해도 된다. 

 

 

Public 폴더 용도

---

여러 소스코드는 src 폴더에 보관하는데,

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

 

리액트로 개발을 끝내면 build 해주게 되는데, 지금까지 짰던 코드들을 한 파일로 압축해주는 작업이다. 

src 폴더에 있던 코드와 파일들은 다 압축 되는데, public 폴더에 있는 것들은 그대로 보존한다. 

 

따라서 형태를 보존하고 싶은 파일은 public 폴더에 넣어주면 되는데 이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없다. 

 

 

 

 

Public 폴더에 있는 이미지 사용

---

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

'/이미지경로' 로 사용하면된다. 

 

따라서 페이지에 이미지가 많아지는 경우 public 폴더에 넣어놓으면 import 여러번 안해도 되니 편리하게 사용할 수 있따. 

css 파일에서도 /이미지경로 사용하면된다.

 

 

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

권장하는 방식은 위와같다. 

 

리액트로 만든 HTML 페이지를 배포할 때, kosssshhhh.com 경로에 배포하면 아무런 문제가 없지만, 

kosssshhhh.com/home/ 경로에 배포하면 해당 이미지 파일을 찾을 수 없다고 할 수 있다. 

 

따라서 /home/ 을 뜻하는 process.env.PUBLIC_URL 을 붙여준다.