[React] - 이미지 넣는 법

import bg from '../bg.jpg';

const Test = () => {

    return (
        <div>
            <img src={bg}></img>
        </div>
    );
}

리액트로 개발을 끝내면 build 작업이라는걸 하는데, 지금까지 짰던 코드를 한 파일로 압축해주는 작업입니다. 

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

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

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

 

public 폴더 안에 이미지가 있는 경우

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

 

나는 그냥 src 폴더안에 resource 폴더에 넣어서 사용한다.