[React] CRA 프로젝트에서 로컬 이미지 경로 설정하는 방법

bomhada·2022년 5월 24일

📘 React study

목록 보기

11/15

공부를 하면서 주로 오픈 API를 가지고 했었는데,
이번에 혼자 만든 개인 프로젝트를 하면서 처음으로
로컬 이미지를 어떻게 CRA프로젝트에 가져와야하는지에 대해 고민을 하게 되었습니다.
그리고 공부한 내용을 기록으로 남겨보려 합니다.

📁 public 폴더

1. public

webpack에 의해 관리되지 않습니다. 대신 원본이 build 폴더에 복사 됩니다.
(minify 되지 않고, content hash가 포함되지 않습니다.)
public 폴더에 접근하기 위해서는 PUBLIC_URL 환경 변수를 사용해야합니다.
경로가 잘못 되었거나 파일이 없을 경우 컴파일 단계에서 에러가 발생하지 않고, 404 에러가 발생합니다.
CRA 문서에서 다음과 같은 경우에만 public 폴더에서 관리하는 것이 유용하고,
이 외의 경우는 src 폴더에서 관리하는 것을 추천합니다.
- manifest.webmanifest 처럼 build 된 결과물에서 특정한 파일 이름이 필요한 경우
- 수천개의 이미지 파일을 동적으로 참조해야하는 경우

2. public 폴더에서 이미지 가져오기

function App() {
  return(
    <img
        src={`${process.env.PUBLIC_URL}/public_assets/logo512.png`}
        alt="React"
    />
  );
}

export default App;

만약 파일을 찾지 못할 경우 컴파일 에러는 일어나지 않고, 이미지 깨짐 표시가 뜬다.

🤓 public 폴더에서 이미지 가져오기 위한 3가지 방법
1. src={${process.env.PUBLIC_URL}/public_assets/logo512.png}}
2. src={'/public_assets/logo512.png'}
3. src={'public_assets.logo512.png'}

3. css에서 이미지 경로 설정 ☠️

가능한지 확인하기 위해 여러 문서들을 확인해본 결과 public 폴더에서 가져오는 방법은 없습니다.
시도할 경우 css 파일에서 절대 경로를 설정하면 src 폴더를 기준으로 경로를 찾기 때문에
src 폴더 내에서는 해당 파일을 찾을 수 없다는 내용의 에러가 나온다고 합니다.

📁 src 폴더

1. src

파일을 찾지 못하는 경우, 컴파일 단계에서 에러를 잡을 수 있습니다.
import 할 경우 참조할 수 있는 경로(path) 문자열을 출력합니다.
content hash가 파일명에 포함되기 때문에 브라우저가 오래된 버전(파일 수정 전)의 파일을
캐싱하고 있는 경우를 고려하지 않아도 됩니다. (파일이 변경되었을 때만 hash값이 변경됩니다.)
서버 요청 횟수를 줄이기 위해 10,000bytes 이하의 이미지는 path 대신 data URL을 반환합니다.
(bmp, gif, jpg, jpeg, png 파일에만 적용, SVG 파일은 제외)
이 때, 파일 크기 기준(10,000 bytes)는 IMAGE_INLINE_SIZE_LIMIT 환경 변수로 설정을 변경할 수도 있습니다.

2. src 폴더에 있는 이미지 - import

import logo from "./src/src_assets/logo512.png";

function App() {
  return(
    <img src={logo} alt="React" />
  );
}

export default App;

webpack을 사용하면 CSS 파일을 import 하는 것처럼 이미지 파일을 import 하여 사용할 수 있습니다.
파일의 제일 상단에 사용할 모든 이미지를 import 해와서 사용하는 동기적인 방법으로
webpack이 이미지 파일을 번들에 포함 시킵니다.
파일을 찾지 못할 경우 컴파일 에러가 발생하여 코드 수정 시 참고할 수 있습니다.

3. src 폴더에 있는 이미지 - require

function App() {
  return(
    <img src={require('./src_assets/logo512.png).default} alt="React" />
  );
}

export default App;

node.js 환경이기 때문에 require로 문서의 어디서나 파일을 불러올 수 있습니다.
default를 붙이는 이유는 require를 사용하면 객체 형태로 값이 리턴되기 때문에,
default를 붙이면 문자열 형태 그대로 인식되게 만들어줍니다.
이 방법을 사용하면 inline으로 src의 이미지 파일 경로를 바로 지정할 수 있습니다.
처음에 모든 이미지 파일을 import 하지 않아도 되기 때문에 편리해보입니다.