Javascript의 경우에는 이미지를 넣는데 그리 어려움을 겪는 경우를 크게 보지 못한 것 같다.
그런데 React를 처음 시작하는 분들, 혹은 BackEnd를 하다가 React를 함께 조금 건들여보고 싶은 분들 중에서 이미지를 불러오는데 애를 먹는 경우를 본 경우가 있다.
해서, 이미지를 불러오는 방법에 대해서 몇 가지 알아보려고 한다.
그 방법으로는 크게
을 알아보려고한다!
이렇게 src 폴더 안에 images폴더 안에 이미지가 들어있는 경우이다!
이와 같은 경우에는 import를 해서 사용할수도 있는데, tree.png를 사용할 예정이므로 tree라는 이름으로 import를 해와서 사용할 수 있다.
그런데 이런 경우, 이미지를 어떻게 쓸지 알고 있어야한다.
만약 모르는 경우 이렇게 놔두다가 나중에 100개가 되고 1000개가 되어버리면 감당이 안 될 수 있을 것이다.
그래서 이는 Logo, Icon과 같은 한번 쓰면 거의 바꾸지 않는 경우에 사용하면 좋겠다!
그렇다면 계속해서 이미지가 바뀌는 경우라면 어떻게 해야할까?
그런 경우 public 안에다가 넣어두면 편하게 이용할 수 있다.
import 방식과 동일하게 src={} 안에 넣어주면 되는데
process.env.PUBLIC_URL
이라는 Syntax를 사용하면 된다.
이는 public 폴더를 겨냥하는 Syntax 이다.
거기에 덧붙혀서 내 이미지가 들어있는 부분의 경로를 넣어주면 갯수에 상관없이 import를 하지 않고 바로 가져올 수 있다.
그러나 이 또한 어쨋든 Hardcoding 한 것이기 때문에 Dynamic 하다고 할 수 없다.
이렇게 json 파일처럼 dummy 라는 이름으로 이미지가 들어있는 경우이며, 이 이미지들은 public 폴더 안의 assets라는 폴더에 들어있다.
그러면 앞서 알아봤던 것들을 합해서 이렇게 map함수를 이용해서 불러올 수 있다!