210911 개발기록: React 에서 (동적으로) 이미지 사용하기

리액트에서 '정적'으로 이미지를 로드하는 방법은 어렵지 않다.

여기서 '정적'으로 이미지를 업로드 한다는 것은, 랜딩페이지의 고정된 이미지처럼 딱히 변경될 필요가 없는 (정적인) 이미지를 뜻한다.

 

사용할 이미지를 import 한 후, 해당 변수(poster) 를 img 태그의 src에 넣어주기만 하면 된다.

이미 경로를 from 에서 선언했으니 굳이 src prop 에 경로를 다시 쓸 필요없이 변수만 사용하면 된다.

import poster from "../images/슬의.png"

...
<img id="poster" src={poster} alt="슬의"/>
...

 

🍎  React 에서 (동적으로) 이미지 로드하는 방법 (require(...).default)

동적으로 이미지를 로드할 경우, 이 방법은 그다지 좋지 않다.

만약 상황에 따라 10개의 서로 다른 이미지를 로드해야한다면, poster 이미지를 import 했듯이 10개의 서로 다른 import 변수를 만들어야 하기 때문이다.

 

우선 사용할 이미지의 경로를  require()의 인자로 가져온다.

그리고 잊지 않고 .default 를 require() 함수에 붙여준다.

 <img
	src={require(`../images/${imageName}.png`).default}
	alt={imageName}
/>

 

이 방법은 별도로 이미지를 import 할 필요없이 곧바로 img 태그의 src에 적용할 수 있다. 

require() 와 default 함수 없이 경로만을 백틱 표기법으로 사용하면, '엑박' 이 뜨는 것을 볼 수 있다.

default 없이 require() 만 사용해도 엑박이 뜨는데, 이는 require() 함수가 리턴하는 것이 object 이기 때문이다.

.default 설정을 붙여주면 이미지의 경로를 가져와 원하는 결과를 낼 수 있다.