[React] 이미지 파일은 어디에 두는 것이 좋을까

 

public 폴더  vs src 폴더 하위

 

/public

- 브라우저에서 접근가능하다

- 절대경로 사용가능

// 올바른 예시 - 절대경로 사용. 파일이름을 바로 사용한다.
<img src="image.png" alt="image" />

// 잘못사용한 예시 - public 폴더 경로를 쓰지 않는다.
<img src="public/image.png" alt="image" />

💡 favicon과 같은 index.html 파일에서 직접 사용하는 이미지 파일을 위치시키는 것이 좋다.

 

src 폴더 하위 (ex. src/assets)

- 브라우저에서 접근 불가능

- 코드 파일에서 import 해서 이미지를 사용하며, 빌드시 이미지 최적화됨

import Image from '@assets/image.png'

//..

return (
	<div>
	  <img src={Image} alt="image" />
	</div>
)

 

💡 컴포넌트에 사용되는 이미지 등의 asset 파일은 src 폴더 하위에 위치시키는 것이 좋다.