이미지 넣는 법 & public 폴더 이용하기

이미지 넣기

(App.jsx)

<div className="main-bg"></div>

(App.css)

.main-bg {
  height : 300px;
  background-image : url('./bg.png');
  background-size : cover;
  background-position : center;
}

• css 파일에서 src 폴더 안에 있는 사진을 사용하고 싶으면 -> ./이미지경로 사용하면 됨.

html 안에서 src 폴더의 이미지를 넣고 싶다면?

import bg from './bg.png'

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

• 이미지를 import 해오고 사용해야됨

1. import 작명 from './이미지경로'
2. 이미지 경로가 필요한 곳에서 작명한 걸 사용

• <img> 태그 쓰고 싶으면 <img src={bg}/> 이렇게 써도 보인다.

화면을 가로로 3등분하고 싶으면

<div className="container">
  <div className="row">
    <div className="col-md-4">안녕</div>
    <div className="col-md-4">안녕</div>
    <div className="col-md-4">안녕</div>
  </div>
</div>

• css 라이브러리를 사용하여 간편하게 쓸 수 있다.
• Row 아니면 Grid를 사용하여 쉽게 구현 가능

상품 3개를 진열해본다면

function App(){
  return (
    <div className="App">
      (Navbar와 대문은 생략)

      <div className="container">
        <div className="row">
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
        </div>
      </div>
    </div>
  )
}

public 폴더의 용도

• 이미지 같은 static 파일의 경우 public 폴더에 보관해도 됨
• 리액트로 개발을 끝내면 build 작업이라는 걸 하는데 지금까지 짰던 코드를 한 파일로 압축해주는 작업
• src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존
• 따라서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js 파일은 그럴 일은 거의 없고 이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관 없음

public 폴더에 있는 이미지 사용할 때

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

• 그냥 /이미지경로 사용하면 됨
• import 따로 안 해줘도된다.
• css 파일에서도 /이미지경로 사용해주면 된다.

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

• 하지만 이것이 권장하는 방식
• 리액트로 만든 html 페이지를 배포할 때 codingapple.com 경로에 배포하면 아무런 문제가 없지만 codingapple.com/어쩌구/ 경로에 배포하면 /logo192.png 이렇게 쓰면 파일을 찾을 수 없다고 나올수도 있다.
• 따라서 /어쩌구/ 를 뜻하는 process.env.PUBLLC_URL 이것도 더해주면 된다.