리액트 CRA , Public 폴더에 있는 이미지 불러오기

최근에 개인작업하다가 폴더 경로에 대해서 정리 필요성을 느껴서 쓰는글.

대부분 그렇듯 나도 이미지 파일은 public 폴더에 넣어두고 작업중이다. 문제는 src 경로에서 페이지 작업하다가 이미지 파일을 불러올 때 ! 어떻게 불러오느냐

1. 첫번째 방법 import로 불러오기

import Logo from "../../public/images/logo.png";

(...)

<h1>
  <img src={logo} alt="로고" />
</h1>

그리고 이렇게 { } 중괄호로 import시킨 logo를 불러오면 된다. 근데 문제는 import 경로 보면 너무 지저분해 보인다.
../../../ 😵

2. 두번째 방법

{process.env.PUBLIC_URL + "/logo.svg"} 이렇게 불러오기

<h1>
 <img src={process.env.PUBLIC_URL + "/logo.svg"} alt="로고" />
</h1>

루트 지옥에 벗어나서 편-안