React에서 이미지라던가 css, js 같은 파일들이 src 폴더 안에 있다면 import해서 불러오면 되지만 public에서는 어떻게 가져와야 할까요?

Public 폴더에 있는 파일 경로 설정하는 방법

src 폴더에 있을 때

import 이름 from 경로;

<img src={이름} />

⭐예제:

import grass from './src_img/grass.png';

function Larva(){
    return (
        <div class="larva">
            <div class="item i-1"></div>
            <div class="item i-2"></div>
            <div class="item i-3"></div>
            <div class="item i-4"></div>
            <div class="eye e-1"></div>
            <div class="eye e-2"></div>
            <img class="grass" src={grass} alt="grass" />
        </div>
    )

}

public 폴더에 있을 때

React의 공식 문서에 의하면 process.env.PUBLIC_URL을 사용하면 된다고 합니다.

<img src={process.env.PUBLIC_URL + '경로'}

⭐예제

<img class ="grass" src={process.env.PUBLIC_URL + '/public_img/grass.png'} />

만약 html이라면 process.env.PUBLIC_URL부분을 %PUBLIC_URL%로 작성해야 합니다.

<link rel="icon" href="%PUBLIC_URL%/public_img/grass.png" />

css에서 이미지를 사용하고 싶을 때

<img>를 <div>로 바꿔주고, css 파일에서 background-img속성을 이용해서 파일 경로를 지정해주면 됩니다.

background-img: url(파일 경로);

참고로💡 jsx는 public폴더를 기준으로, css는 src를 기준으로 절대 경로 정하므로 이점에 유의해서 경로를 지정해줘야 합니다.

⭐예제

<div class="grass"></div>

• 파일이 src 폴더에서 관리되고 있을 때:

.grass{
      background-image: url(./src_img/grass.png);
      width: 350px;
      height: 100px;
}

• 파일이 public 폴더에서 관리되고 있을 때:

.grass{
      background-image: url(../public/public_img/grass.png);
 	  width: 350px;
      height: 100px;
}

---

Public과 Src 경로 차이점

public 폴더에 파일을 관리할 경우

• public 폴더에 있는 모든 파일들은 사후 처리되거나 'minified'되지 않습니다.
• 파일이 누락될 경우 컴파일 시 호출되지 않는 대신 404 오류가 발생합니다. 즉, 어디에서 파일이 누락됐는지 알기 어렵습니다.
• 렌더링 후 브라우저에서 파일 이름에 콘텐츠 해시가 포함되지 않아 query argument(ex. process.env.PUBLIC_URL)를 추가하거나 또는 경로나 파일명이 변경될 때마다 수정해줘야 합니다. 즉, webpack에 의해 관리되지 않아 개발자가 수동으로 해줘야 한다는 것입니다.

src 폴더에서 파일을 관리할 경우

• 서버에 요청하는 횟수를 줄이기 위해서, 이미지는 경로 대신 10,000 바이트 미만의 data URI로 반환하여 importing합니다.

  SVG 파일을 제외하고, bmp, gif, jpg, jpeg, png 등의 파일들은 IMAGE_INLINE_SIZE_LIMIT 환경변수 설정을 통해 파일 크기를 최대 10,000 바이트까지 조절할 수 있습니다.

• 파일을 import해서 직접 사용하는 경우, 파일을 간단한 문자만으로 img의 src이나 link의 href처럼 사용할 수 있습니다.

import 파일 from 경로;
.
.
.
<img class="grass" src={파일} alt="grass" />

• webpack에서 관리가 이루어지므로 파일이 누락될 시 컴파일 단계에서 호출되어 에러를 쉽게 잡을 수 있습니다.

🔗참고 링크: React🌍"Using the Public Folder"
🔗참고 링크: React🌍"Adding Images, Fonts, and Files"