create-react-app처럼 웹팩을 사용하는 경우에 img 태그에 이미지 소스를 넣는 방법은 두가지다.
리액트는 편한듯 불편하다 그냥 이미지도 귀찮게 import하거나 require를해야한다..
예제를 통해보자.
require() 사용하기
<img src={require("./img.png")}/>import해서 사용하기
import Img from './img.png';
<img src={Img} />왜 require또는 import 두가지 경우를 고려해야할까? 답은 import로 모듈을 불러오는 경우 사용하지 않는 코드들은 웹팩의 tree shaking에 인해 빌드 시 제거되어, 코드량이 줄어들고 성능적으로 우수해진다. 하지만 require()를 사용하는 경우, 모듈을 동적으로 불러올 수는 있지만 불필요한 코드들까지 불러오게 된다.
Hello :)