[React.js] create-react-app에서 img 태그에 이미지 소스 넣기

create-react-app처럼 웹팩을 사용하는 경우에 img 태그에 이미지 소스를 넣는 방법은 두가지다.

 

1. require() 사용하기

<img src={require("./imgfile.png")}/>

 

2. import해서 사용하기

import imgfile from './imgfile.png';
<img src={imgfile} />

 

require()와 import 사용 시 차이점은?

import로 모듈을 불러오는 경우 사용하지 않는 코드들은 웹팩의 tree shaking에 의해 빌드 시 제거된다. 결과적으로 코드량이 줄어들고 성능적으로 우수해진다.

반면 require()를 사용하는 경우, 모듈을 동적으로 불러올 수는 있지만 불필요한 코드들까지 불러오게 된다.