React실전2 img 이미지 넣는법

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

1. css 파일에서 src 폴더안에 있는 사진을 사용하고 싶으면

• ./이미지경로 사용하면 됩니다.

(App.css)

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

2. html 안에서 src 폴더의 이미지를 넣고 싶으면

• 이미지를 import 해오고 사용해야합니다.

import bg from './bg.png'

function App(){
  return (
    <div>
      <div className="main-bg" style=></div>
    </div>
  )
}

1. import 작명 from ./이미지경로 한 다음에

2. 이미지경로가 필요한 곳에서 작명한걸 사용하면 됩니다.

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

귀찮으면 css파일을 활용합시다.

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

• React-bootstrap 사이트에서 Row 아니면 Grid 라고 검색해서 그거 복붙
• 후에 import 하기

어디 호스팅되어있는 외부 이미지는

• 절대경로 그대로 작성하면 잘보입니다.

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>
  )}

public 폴더의 용도

여러가지 소스코드는 src 폴더에 보관하면 되는데

이미지같은 static 파일의 경우 public 폴더에 보관해도 됩니다.

리액트로 개발을 끝내면 build 작업이라는걸 하는데

지금까지 짰던 코드를 한 파일로 압축해주는 작업입니다.

src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해줍니다.

그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js 파일은 그럴 일은 거의 없고

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

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

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

• 그냥 /이미지경로 사용하면 됩니다. 편리하죠?
• 그래서 페이지에 이미지 100장을 넣어야하는 경우
• public 폴더에 밀어넣으면 import 100번 안해도 되니 편리합니다.
• css 파일에서도 /이미지경로 사용하면 됩니다.

public 권장하는 방식

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

왜냐면 리액트로 만든 html 페이지를 배포할 때

sage.com 경로에 배포하면 아무런 문제가 없지만

sage.com/어쩌구/ 경로에 배포하면

/logo192.png 이렇게 쓰면 파일을 찾을 수 없다고 나올 수도 있습니다.

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

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