이미지 파일

html 안에서 src 폴더의 이미지를 넣기

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. 이미지경로가 필요한 곳에서 작명한 변수를 사용한다.

public 폴더

리액트로 개발을 마치면 모든 코드를 한 파일로 압축해 주는 빌드 작업을 하는데 /src 경로의 코드와 파일은 다 압축이 되지만 /public 내에 있는 것들은 그대로 보존해 준다.

그래서 형태를 보존하고 싶은 파일은 /public 내에 넣으면 된다.

이미지, txt, json 등 수정이 필요 없는 static 파일들의 경우엔 /public 에 보관해도 된다.

**/public 에 있는 이미지**

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

import 를 안해도 되니 이미지가 많아도 편리하다.

권장되는 방식

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

리액트로 만든 html 페이지를 베포할 때,

사이트.com경로에 베포하면 문제가 없지만

[사이트.com/어쩌구](http://사이트.com/어쩌구)/ 경로에 배포하면 이전의 방식은 파일을 찾을 수 없다고 나올 수 있다.

그래서 /어쩌구/ 를 뜻하는 process.env.PUBLIC_URL 을 더해주면 된다.