외부 리소스 참조하기

이미지 파일 등의 외부 리소스 파일을 참조하기 위해서는 해당 파일의 경로를 지정해줘야 한다.

---

src 폴더 내 파일 참조

 

/* CSS에서  src 폴더 내 background image 를 참조 */
.class-name {
	background-image: url(./bg.png);
}

// App.js(HTML)에서 참조
import imgSourceName from './bg.png'; // 참조 대상 경로를 참조명으로 import 한다.

<tag style={ { backgroundImage: 'url(' + imgSourceName + ')' } }> ...

---

PUBLIC 폴더 내 참조

// 사용법
<img src="/bg.png"/>

// 권장 사용법 - 서브 주소에 배포하는 경우 정상적으로 표현되지 않는 경우가 있기 때문.
<img src={ process.env.PUBLIC_URL + '/bg.png' } />

---

src/PUBLIC

src는 build시 html, js, css로 컴파일할 때 되는데, PUBLIC은 컴파일 대상이 아니라 content 취급.

참조 : https://bokjiho.medium.com/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-public-src-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%EC%B0%A8%EC%9D%B4-fddb4f455c2a