[REACT] 이미지 관리 방법 (public vs assets)

 

리액트에는 크게 이미지처리방법이 2가지 있다.

 

 

1. public 파일 안에 바로 이미지를 관리하는 방법

2. src/assets 파일을 만든 후 이미지를 관리하는 방법

 

 

과연 어떤 방법이 좀 더 좋은 방법일까? 

 

정답은 두가지 방법다 장단점이 존재한다.. 이다.

 

 

1. public 사용

 

간단하게 사용할 수 있으며 public 폴더에 있는 이미지를 상대 경로를 통해 쉽게 불러올 수 있다.

이미지를 직접 불러오기 때문에 번들링 처리가 필요없다 라는 장점이 있다.

 

대신 이미지의 관리가 어려울 수 있으며 이미지가 많거나 프로젝트가 커질수록 유지보수가 어려워진다는 단점이 있다.

 

또, 이미지의 크기가 큰 경우 로딩 성능에도 영향을 미칠 수 있다고 한다.

 

<img src="/images/my-image.jpg" alt="My Image" />

위 예시처럼 불러올 수 있다.

 

 

2. src/assets 사용

이미지를 구조화 할 수 있기 때문에 유지보수 및 관리 측면에서 큰 도움이 된다.

Webpack과 같은 모듈 번들러를 사용하여 이미지를 처리할 수 있으며 이미지를 최적화하고 번들에 포함시킬 수 있다.

 

하지만 이미지를 번들링하면 번들의 크기가 커질 수 있다.

 

import myImage from '../assets/images/my-image.jpg';

// ...

<img src={myImage} alt="My Image" />

 

위 예시처럼 사용할 수 있다.

 

 

따라서 프로젝트의 성향에 따라서 이를 잘 선택하는 것이 중요하다. 보통 큰 규모의 프로젝트일수록 src/assets 폴더를 활용하여 이미지를 구조화하고 관리한다.

 

 번들러를 통해 이미지를 최적화할 수 있는 장점이 크고 유지보수가 쉽기 때문이다.