📗목차
public으로 이미지 불러오기
혼자 리액트로 개발할 때는 public 폴더에 이미지를 넣어 놓고, 컴포넌트에서 사용할 이미지를 상대 경로로 불러왔다.
위의 사진을 보다 싶이 Album 프로젝트에서는 이렇게 public에서 이미지를 불러왔다.
이미지를 어떤 방식으로 불러와야 되는지 알아봤을 땐 public에서 상대 경로로 불러오는 방식이 제일 먼저 보였고, 다들 그렇게 불러오는 줄만 알고 있었다.
그런데 팀플을 하다 보니 같이 프론트 작업하시는 분께서 얘기하시기를.
"초기 로딩할때 퍼블릭에 들어있는거 다 가져오느라 웹 느려질 수도 있어서 가볍게 쓰는거 아니면 잘 안쓰는거 같아여"
이 말이 무슨 말인지 좀 더 자세히 알아보았다.
React App은 배포를 위해 build를 하면 한 파일로 압축하게 되는데, 이때 public폴더는 압축되지 않고 형태를 그대로 유지한다.
이런 특징이 있기에 public에 많은 이미지를 넣으면 안 되는 것이었다.
애초에 폴더 구조가 "src/assets" 로 돼 있었지만, public 처럼 경로를 불러오니 컴포넌트에 이미지가 적용이 되지 않았었다. 그래서 잠시 public에서 불러 온 것이라고 얘기 드렸다.
그럼 "src/assets"에 이미지를 저장하면 어떻게 이미지를 적용할 수 있을까?
src로 이미지 불러오기
자, 위의 구조를 기반으로 아래를 살펴보자.
이렇게 경로를 불러와서 사용할 변수명을 작성해주면 된다. 그러고 아래와 같이 변수를 이미지 속성에 적용해주면 된다.
그럼 적용할 이미지가 많을 땐 하나하나 다 import 해야 되는 건가. 이미지를 많이 사용하게 될 땐 비효율적일 거 같다는 생각이 드는데...
그럴 땐 require 함수를 사용하면 된다.
require 함수로 이미지 불러오기
<img
src={require(`../../assets/images/돋보기.png`).default}
alt="Search"
/>require 함수가 반환하는 것은 객체이기 때문에 default까지 붙여주는 것을 명심하자!
