[React] 이미지 넣기 & public 폴더

 

이미지 넣은 방법

1. CSS 안에서

css 파일에서 src 폴더 안에 있는 사진을 싶으면 ./이미지경로 사용하면 된다.

(App.css)

.main-bg {
  height: 300px;
  background-image: url('./bg.jpg');
}

 

2. HTML 안에서

html 파일에 이미지를 넣고 싶으면 이미지를 import 한 후 사용해야한다.

(App.js)

import bg from './bg.jpg';

function App() {
  return (
    <div className="App">
      <div className="main-bg" style={ { backgroundImage: 'url(' + bg + ')' } }></div>
    </div>
  );
}

 

(1) import 작명 from './이미지경로'

(2) 이미지 경로가 필요한 곳에서 작명한 걸 사용

(<img> 태그 쓰고 싶으면 <img src={bg}/> 이렇게 사용해도 됨)

 

 

 

public 폴더

여러가지 소스 코드는 src 폴더에 보관하면 되는데 이미지 같은 static 파일의 경우에는 public 폴더에 보관해도 된다.

 

리액트로 개발을 끝내면 작성했던 코드를 한 파일로 압축해 주는 build 작업을 한다. 이때 src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있던 것들은 그대로 보존해 준다. 

그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 이미지, txt, json 등 수정이 필요없는 static 파일들의 경우에는 public 폴더에 보관해도 상관없다.

 

 

public 폴더에 있는 이미지 사용

<img src="/logo.png" />

 

/이미지경로 를 사용하면 된다.

import 안 해도 돼서 편리하다.

css 파일에서도 /이미지경로 사용하면 된다.

 

<img src={process.env.PUBLIC_URL + '/logo.png'} />

 

하지만 권장되는 방식은 이렇게다. 

왜냐하면 리액트로 만든 html 페이지를 배포할 때 abcd.com 경로에 배포하면 아무런 문제가 없지만 abcd.com/어쩌구/ 경로에 배포할 경우에 /logo.png 이렇게 쓰면 파일을 찾을 수 없다고 나올 수 있다.

그래서 /어쩌구/를 뜻하는 process.env.PUBLIC_URL 이것을 더해 주면 된다. 

 

abcd.com/어쩌구/  경로에 리액트로 만든 페이지를 배포할 일이 아예 없으면 굳이 안 해도 된다.

 

 

 

 

 

 

* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.