React 이미지 경로 public? src?

react로 프로젝트를 진행 함에 있어서 img 파일을 public, src 어디에 저장하고, 또 사용할 때 경로설정은 어떻게 해야하는지 알아보자

이미지를 public, src 어디에 저장해야 할까?

public

• 앱 전체에서 공통적으로 사용되는 로고나 favicon 같은 정적인 자산
• public 폴더는 빌드 시 그대로 복사되며, 정적 파일을 저장하는 위치이다.
• 파일을 찾지 못하는 경우, 컴파일 단계에서 에러가 발생하지 않고, 404 에러가 발생한다.

src

• 특정 컴포넌트에서만 사용되는 프로필 사진 같이 컴포넌트와 연계된 자산
• src 폴더는 React 컴포넌트와 함께 번들링된다. 즉, 모든 자산은 Webpack에 의해 처리된다.
• 파일을 찾지 못하는 경우, 컴파일 단계에서 에러를 잡을 수 있다.

이미지를 사용할 때 경로는?

폴더 구조 예시

/project
├── /public
│	├── index.html
│   ├── favicon.ico
│   └── /images
│       └── logo.png
└── /src
    ├── index.css
    ├── /assets
    │   └── /images
    │       └── profile.png
    └── /components
        └── NavBar.jsx
        └── NavBar.css

html

index.html 에서 public 폴더의 이미지 참조

공식 문서에서도 알 수 있다시피 public 폴더 내의 파일만 HTML에서 참조할 수 있다.
또한 %PUBLIC_URL%와 같이 사용하는 이유는 클라이언트 측 라우팅을 사용하거나 루트가 아닌 URL에 호스팅하는 경우에도 잘 작동하게 하기 위해서 이다.

  <head>
    <!-- ... -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- ... -->
  </head>

jsx

jsx(NavBar.jsx) 에서 public 폴더의 이미지 참조

jsx에서 절대경로는 public폴더를 기준으로 하기 때문에 위와 같이 PUBLIC_URL 환경변수를 사용 하여 접근 할 수 있다.

const NavBar = () => {
  return <img src={process.env.PUBLIC_URL + "/logo192.png"} alt="logo" />;
};

jsx(NavBar.jsx) 에서 src 폴더의 이미지 참조

import logo from "../assets/images/logo.png";
const NavBar = () => {
  return <img src={logo} alt="logo"></img>;
};

css

css(NavBar.css) 에서 public 폴더의 이미지 참조

.logo {
  background-image: url("/public/images/logo.png");
  width: 100px;
  height: 100px;
  background-size: cover;
}

css(NavBar.css) 에서 src 폴더의 이미지 참조

.logo {
  background-image: url("/src/assets/images/logo.png");
  width: 100px;
  height: 100px;
  background-size: cover;
}