[React, vite] 이미지 넣는 방법들

이미지 파일을 React 프로젝트에 추가하는 방법에는

Import를 통한 경로 설정과

public 폴더를 사용하는 방법이 있다.

 

1. 'import'를 통한 경로 설정

import React from 'react';
import myImage from './images/myImage.jpg';

const MyComponent = () => {
  return (
    <div>
      <img src={myImage} alt="My Image" />
    </div>
  );
};

장점 :

- 모듈 시스템 활용이 가능 : 'import'를 사용하면 모듈 시스템의 일부로 이미지를 포함할 수 있다.

- webpack 등의 번들러를 사용할 경우, 이미지를 최적화하고 관리할 수 있다.

 

단점 :

- 이미지 파일이 큰 경우 번들 크기가 증가할 수 있다.

- 동적으로 이미지를 관리하기 어려울 수 있다.

 

 

- 모듈 시스템

모듈 시스템이란 코드를 모듈로 나누고 조직하는 방법이다.

import는 자바스크립트 모듈 시스템에서 사용되는 키워드로 다른 모듈에서 함수, 변수, 클래스, 객체 등을 가져오는 데 사용한다.

// myModule.js

export const myVariable = 42;

export function myFunction() {
  return "Hello, World!";
}

모듈에서 export 키워드를 사용하여 'myVariable'과 'myFunction'을 다른 파일에서 사용할 수 있게 함

 

// main.js

import { myVariable, myFunction } from './myModule';

console.log(myVariable); // 42
console.log(myFunction()); // Hello, World!

'import'를 사용하여 'myModule'에서 내보낸 요소들을 가져와 사용할 수 있다.

이런 모듈 시스템은 코드를 구조화 하고 재사용성을 높이는 데 도움을 준다.

이를 통해 웹팩과 같은 번들러를 사용해서 이미지를 최적화하고 효율적으로 관리할 수 있다.

 

 

2. root에 위치한 'public' 폴더를 사용 (vite 사용 시)

React 프로젝트의 'public' 폴더에 이미지 파일을 추가하여 이렇게 사용할 수 있다.

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <img src="/images/myImage.jpg" alt="My Image" />
    </div>
  );
};

장점 :

- 별도의 import 없이 바로 상대경로를 이용해 이미지를 가져올 수 있다. 이미지가 static file로 저장되기 때문

- 이미지 파일을 직접 관리하므로, 동적으로 추가/제거하기 용이하다.

- 이미지를 서버에서 가져오는 경우에 유용하다.

 

단점 :

- 이미지를 최적화하거나 모듈 시스템으로 활용하기 어렵다.

- 번들러가 이미지 파일을 최적화하지 않는다.

 

vite는 개발 중 정적 파일을 제공하기 위해 public 폴더를 사용한다. 개발 서버가 실행될 때, 이 폴더에 있는 파일들은 /를 기준으로 제공한다. 

http://localhost:3000/logo.svg 경로로도 접근 가능하다.

 

프로젝트 요구에 따른 선택

프로젝트 크기 및 최적화

- 작은 프로젝트에서는 상대적인 차이가 크지 않을 수 있다.

- 큰 프로젝트에서는 'import'를 통한 모듈 시스템을 사용해 이미지를 최적화하고 관리 하는 게 좋다.

 

동적 이미지 관리

- vite에서 이미지를 동적으로 추가/제거해야 하는 경우에는 'public' 폴더를 사용하는 것이 편하다.

 

번들러 사용 여부

- Webpack 등의 번들러를 사용하는 경우 'import'를 통한 모듈 시스템을 사용하는 것이 일반적이다.

 

프로젝트 특성

- 프로젝트의 특성에 따라 취향차이가 있을 수 있다.