[React] 리액트 이미지 경로 지정방법 2가지

1. import를 사용한 이미지 불러오기

이미지 파일을 직접 가져와 사용하는 방법이다. 주로 컴포넌트 파일과 같은 위치에 이미지 파일이 있을 때 사용된다.

import logo from "./assets/logo.png"; // 이미지 파일 경로

function App() {
  return (
    <div>
      <img src={logo} alt="Logo" />
    </div>
  );
}

export default App;

• 장점: Webpack이 이미지 파일을 최적화하고, 컴포넌트와 함께 모듈화되어 관리된다.
• 단점: 대용량 파일이나 이미지가 많을 경우 Webpack이 모든 이미지를 번들에 포함시키기 때문에, 빌드 시간이 늘어날 수 있다.

2. public 폴더에 이미지 저장 후 상대 경로 사용

public 폴더에 이미지를 저장하고 상대 경로를 사용하는 방법이다. public 폴더에 있는 파일들은 빌드 시 그대로 복사되므로, 직접 경로를 지정하여 접근할 수 있다.

function App() {
  return (
    <div>
      <img src="/logo.png" alt="Logo" />
    </div>
  );
}

export default App;

• 장점: 대량의 이미지나 큰 파일을 관리할 때, public 폴더를 사용하면 번들 크기를 줄일 수 있다. 이미지 URL을 직접 지정할 수 있어 간편하다.
• 단점: Webpack의 이미지 최적화 기능이 적용되지 않으므로, 성능과 크기 조정을 별도로 신경 써야 한다. 브라우저 캐시 문제도 고려해야 한다.

3. 정리!

작은 프로젝트 진행 시

import를 사용하여 이미지를 불러오자! Webpack이 이미지를 최적화하고, 모듈화된 관리가 가능하다.

대용량 파일이 필요한 경우

public 폴더를 사용하여 이미지를 저장하고 상대 경로로 접근하자! 번들 크기를 줄일 수 있고, 직접 URL을 통해 접근할 수 있다.