[React] 이미지 불러오기

📌 이미지 불러오는 방법 3가지

(1) src폴더에 이미지 폴더에서 불러오기
(2) public 폴더에 이미지를 URL로 불러오기
(3) Module로 분리해서 불러오기

⭐ (1) src폴더에 이미지 폴더에서 불러오기

assets는 임의로 지정한 이미지 폴더명이다. 즉 image폴더임을 알 수 있는 이름을 사용하면 된다.

1. src폴더 > assets폴더 만들기 > 폴더안에 사용한 이미지 넣기

2. 이미지를 import 해와야 한다

   //예시
   import image1 from "./asstes/image.jpg"

3. return문 안에 img 렌더링하기

     //예시
     <img src={image1} alt="첫번째 이미지"/> 

⚠️ 매번 이미지를 사용할 때마다 import를 해와야 하는 번거로운 단점이 있지만 이미지들은 자동으로 브라우저의 메모리에 저장되어서 새로고침 하더라도 다시는 이미지를 불러오지 않기 때문에 최적화 할 수 있는 방법이기도 하다.

⭐ (2) public 폴더에 이미지를 URL로 불러오기

따로 import를 해주지 않아도 사용이 가능하다 !

1. public 폴더 > 이미지 넣기
2. return문 안에 img 렌더링하기

     //예시
     <img src={"/image1.jpg"} alt="첫번째 이미지"/> 

   ⚠️ import를 하지 않아도 되지만 새로고침 할 때마다 이미지를 새로 불러오기 때문에 최적화에 불리한 단점이 있다.

⭐ (3) Module로 분리해서 불러오기

Module이란 간단하게 말해서 목적에 따라 코드를 분리하는 것을 의미한다. 매번 import해오기 번거롭기 때문에 여러 단점을 보완하기 위해서 폴더안에 파일을 따로 생성해서 만드는 것이다

1. src 폴더 > 모듈로 분리 할 폴더 생성 > 이미지 담을 파일 생성
2. 아래 작성된 코드처럼 모듈로 파일 분리하기

// 예시

import bridge from "./../images/bridge.jpg"; //이미지 경로 주의해서 쓰기 !
import unexpectedly from "./../images/unexpectedly.jpg";

const getCafeImage = (cafeId) => {
  switch (cafeId) {
    case 1:
      return bridge;
    case 2:
      return unexpectedly;
    default:
      return null;
  }
};
export default getCafeImage;

3. 이미지가 사용 될 파일에서 import 하고, 사용하기

// 예시

import getCafeImage from "../Util/get-cafe-image";

<img src={getCafeImage(1)} alt="브릿지카페"/>
          
// 경로 > "../" : 상위폴더 이동
// 경로 > "./../" : 상위폴더 아래 images 하위폴더           

출처

한입 크기로 잘라 먹는 리액트