[React] 이미지 파일은 public폴더 vs src폴더 어디에 넣을까

이미지를 어떤 폴더에 넣을 지 궁금해서 찾아봤다.

아래 출처 블로그 내용)

 

📁 public : 앱이 컴파일될 때 사용하지 않는 모든 것

• 앱을 컴파일하는 데 필요하지 않은 요소들.
• 절대경로 사용이 가능해진다!
• import 해올 일이 있을 때, ../../이렇게 상대경로로 써주지 않아도 되고, 그냥 파일명 써주면 가능하다!
• 정적파일을 담는 곳. 사용자가 직접 웹브라우저상으로 볼 수 있는 index.html같은 파일들, image 파일들이 담긴다.
• 경로를 동적으로 참조해야 할 때 퍼블릭 폴더를 쓴다
  (You have thousands of images and need to dynamically reference their paths. 상대경로로 쓰면 경로가 하나 바뀔 때마다 다 수정되기 때문에인가?)
  
  

📁 src : 앱이 컴파일 될 때 사용하는 모든 것

• 개발하면서 작업하는 파일 대부분을 넣는 폴더(index.js, 그 외 컴포넌트 같은 js파일, css파일 등)

예를 들어, 컴포넌트 안에서 사용하는 이미지는 src폴더에 있어야 하지만

파비콘과 같이 앱 밖에서 사용하는 이미지는 public 폴더에 있어야 한다.

 

이미지 파일 가져오기

만약 이미지파일을 두 폴더에서 가져오려면

📁 public
<img src="/image.jpg" />
📁 src
<img src={require('../../assets/image.jpg')} />

src폴더에 있는 이미지는 require를 통해 가져올 수 있다.

 

src폴더에서 require를 통해서 가져 온 이미지가 갖는 장점이 있다는데!

1. Scripts and stylesheets get minified and bundled together to avoid extra network requests.
   추가 네트워크 요청을 피하기 위해 스크립트와 스타일시트가 축소되고 함께 번들됩니다.
2. Missing files cause compilation errors instead of 404 errors for your users.
   파일이 없으면 사용자에게 404 오류 대신 컴파일 오류가 발생합니다.
3. Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
   결과 파일 이름에는 콘텐츠 해시가 포함되므로 브라우저가 이전 버전을 캐싱하는 것에 대해 걱정할 필요가 없습니다.

또, webpack's asset bundling을 사용하면 /src내의 파일들이 rebuilt된다!
-> rebuild를 빠르게 하기 src내부의 파일만 webpack에서 처리되므로 /src안에 모든 JS, CSS 파일을 넣어야 한다. 안그럼 webpack에서 볼 수 없음!
아하 ! js, css파일들이 src에 들어있었던 이유!

 

그렇다면 반대로 public 폴더로 가져온다면?

1. 파일이 후처리(post-process)되거나 경량화(minify)되지 않음
2. 파일 경로를 잘못 입력하거나 해당파일이 존재하지 않을 경우 컴파일 단계가 아닌 사용자가 접근할 때 404 오류를 응답받음
3. 결과 파일명에 content hash가 포함되지 않기 때문에, 파일이 수정될 때마다 직접 파일명을 수정하거나 매개변수 쿼리를 추가해야 한다. 

---

혹시 import를 안하고 인라인으로 src 내의 이미지 파일을 불러오고 싶다면!

 <img src={require("../../../assets/Logo.svg").default}/>

이런식으로 상대경로를 안에 써줘야 한다!
.default를 안쓰면 객체가 return 되기 때문에
defult까지 꼭 붙여주기!

 

[React] public폴더 src폴더 어디에 넣어야 되는걸까? / react에서 img불러오기