리액트 image 어디에다 저장해야할까 (public vs src)

들어가면서

리액트를 사용하다 보면 이미지를 public 폴더 안에 둘지, src 폴더에 두어야 할지 고민이 되었다.

각각 방식이 어떤 차이가 있는지 알아보고 나의 상황에 알맞게 관리하고 사용해야겠단 생각이 들었다.

 

public 폴더에 이미지 파일 관리

 

public 폴더에 이미지를 두게 되면 아래와 같은 특징이 있다.

• 이미지가 경량화 되거나 후처리 되지 않는다.
   즉 빌드 시 웹팩에 의해 처리되지 않고 원본 그대로 빌드폴더에 추가된다.
•  아래 case1처럼 PUBLIC_URL 환경변수를 통해 접근해야한다.
   라고 공식문서에는 나와있지만 case2,3 도 된다.

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; // case1
return <img src={'public/img/logo.png'} />; // case2
return <img src={'/public/img/logo.png'} />; // case3

• 이미지가 잘못된 경우 컴파일 에러가 발생하지 않고 404에러가 발생한다.
• content hash가 추가 되지 않는다. (이미지 파일이 변경되면 파일명을 직접 변경해줘야 유저들의 브라우저가 캐싱한 이미지를 업데이트 해줄 수 있음)

 

src 폴더에서 이미지 파일 관리

• import 방식을 사용할 경우 빌드 시 이미지를 경량화 하고 번들링 되므로 추가 네트워크 요청이 필요없다.
• 이미지가 잘못된 경우 컴파일 단계에서 에러가 발생하여 수정할 수 있다.
• content hash가 추가 된다. (이미지 파일이 변경되면 빌드 시 새로운 content hash가 생성되어 유저 브라우저에 캐싱된 이미지가 업데이트 된다.)
• 서버 요청 횟수를 줄이기 위해 10,00 bytes 이하의 이미지는 path대신 data URL을 반환한다.
  (bmp, gif, jpg, jpeg, png 파일에 적용, svg 파일 제외)
  *data URL은 바이너리 파일을 Base64로 인코딩하여 ASCII 문자열 형식으로 변환한 것이다.
    HTTP 요청이 일어나지 않고 캐싱 되지 않는다. 

 

그래서 결론은

CRA에서는 Import 하는 방식을 추천한다. 이는 아래와 같은 이점을 준다.

• 최적화 -> script and stylesheets들이 경량화되고 번들되어 추가로 네트워크 요청을 할 필요가 없다.
• UX -> 404에러 대신 컴파일 오류를 발생 시킨다. (유저에게 보여지기 전 에러를 잡을 수 있다)
• UX -> 결과 파일 네임에는 해시값이 포함되어 브라우저가 이전 파일을 캐싱하고 있는 것을 걱정할 필요 없다.

 

public 폴더를 사용해야할 경우

• 빌드 결과로 특정 이름의 파일이 필요할 때 manifest.webmanifest
• 수천개의 이미지들을 동적으로 참조할 때
• 번들된 코드외에 작은 js 파일을 포함 시킬 때
• 몇몇 라이브러리들이 웹팩과 호환이 되지 않을 때 <script>태그 추가가 필요한 경우

 

Ref
CRA - Using the Public Folder

CRA에서 이미지 경로를 설정하는 4가지 방법

data url이란

where to store images in Reace App