React, 이미지 넣기 & public 폴더

이미지 넣기

CSS 안에서

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

 

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

 

Html 안에서

Html 안에서 src 폴더의 이미지를 넣으려면 이미지를 import 한 뒤 사용

 

import bg from './bg.png'

function App(){
  return (
    <div>
      <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 폴더에 넣으면 되는데 js 파일은 보존할 일이 거의 없고

이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없음

 

public 폴더에 있는 이미지 사용

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

/이미지경로 사용하면 됨

import를 안해도 되어 편리. css 파일에서도 /이미지경로 사용하면 됨

 

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

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

 

왜냐하면 리액트로 만든 html 페이지를 배포할 때 sugarpop.com 경로에 배포하면 문제가 없지만

sugarpop.com/어쩌구/ 경로에 배포하여 /logo.png 쓰면 파일을 찾을 수 없다고 나올 수 있음

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

 

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