React - image, 화면가로3등분(bootstrap이용),public폴더용도

현재 페이지는 이렇습니다. 

위의 nav는 react bootstrap에서 가져왔습니다. 이제 nav아래에 페이지의 대문을 장식하는 이미지를 넣어보겠습니다.

 

img 넣는법

css에서 img넣기

App.js에 <div className = "main-bg"></div>를 작성해주고 css에서 다음과 같이 작성합니다.

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

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

 

 

html에서 img넣기

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}/> 이렇게 써도 됩니다. 

 

 

 

화면을 가로로 3등분

화면을 가로로 3등분하고 싶으면 Bootstrap에 있는 코드를 사용하면 간편해집니다. 

아래의 코드를 복사 붙여넣기만 하면 됩니다.

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

그래서 아래와 같이 이미지, 상품명, 상품정보를 추가해보았습니다.

<div className="container">
      <div className="row">
         <div className="col-md-4"> <img id="shoe_img" src="이미지경로" width="80%"/>
            <h4>상품명</h4>
            <p>상품설명</p></div>
         <div className="col-md-4"> <img id="shoe_img" src="이미지경로" width="80%"/>
            <h4>상품명</h4>
            <p>상품설명</p></div>
          <div className="col-md-4"> <img id="shoe_img" src="이미지경로" width="80%"/>
            <h4>상품명</h4>
            <p>상품설명</p></div>
      </div>
    </div>

 

 

public폴더의 용도

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

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

리액트로 개발을 끝내면 build 작업이라는걸 하는데 지금까지 잤던 코드를 한 파일로 압축해주는 작업입니다.

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

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

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

 

 

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

/이미지경로 사용하면 됩니다. 그래서 페이지에 이미지 100장을 넣어야하는 경우 public 폴더에 밀어넣으면

import 100번 안해도 되니 편리합니다. css파일에서도 /이미지경로 하면 됩니다. 

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

 

하지만 권장되는 방식은 아래입니다. 왜냐면 리액트로 만든 html 페이지를 배포할 때 

문제가 발생할 수 있습니다. 그래서 아래와 같이 사용하면됩니다. 

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

 

 

 

---

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌