React 쇼핑몰(Boostrap, 이미지, public 폴더)

Bootstrap

쇼핑몰을 간단히 만들어보면서, react에 대해서 이어서 배워보겠습니다.

우선, 터미널로 아래 코드를 입력하여 새로운 리액트 프로젝트를 만들고 시작하겠습니다.

npx create-react-app shop

 

그리고 이번부터는 Bootstrap 라이브러리를 이용해서 디자인된 레이아웃들을 이용해보겠습니다.

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

우선 리액트 부트스트랩 라이브러리를 설치해야합니다.

사이트에서 알려주는데로 따라하면 됩니다.

터미널에 npm install react-bootstrap bootstrap 코드를 입력하면 부트스트랩 설치가 됩니다.

그리고 상단에 import 'bootstrap/dist/css/bootstrap.min.css'를 입력하거나, cdn을 html 페이지에서 설치해줍니다.

 

여기까지 따라왔으면, 부트스트랩을 시작할 준비가 다됐습니다.

우선, 부트스트랩으로 상단의 navbar를 넣어봅시다.

import {Container, Nav, Navbar } from 'react-bootstrap';

function App() {
  return (
    <div className="App">
      <Navbar bg="dark" data-bs-theme="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </div>
  );
}

navbar를 가져오기 위해서는 상단에 개별 라이브러리들을 import하고,

코드를 넣으면 간단하게 navbar를 가져올 수 있습니다.

 

 

이미지 넣기

리액트에서 이미지를 넣을 때는 우선 css 파일에서 입력하는 방법이 있습니다.

홈페이지 대문에 들어갈 이미지를 넣어보겠습니다.

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

(App.css)

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

위의 코드를 보면 css 파일에서 직접 이미지 경로를 입력해서 이미지를 넣은 것을 볼 수 있습니다.

 

하지만, css파일에서 이미지를 넣는 것이 싫고 html에서 이미지 넣는 코드를 쓰고 싶다면 이미지를 import해야합니다.

import bg from './bg.png'

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

'import 작명 from 이미지경로' 를 상단에 넣어 이미지를 import합니다.

그리고 div 태그에 style={{ backgroundImage: 'url(작명)'}} 을 넣어주면 됩니다.

작명 자리에는 변수를 넣을 수 있는 문법을 사용해주시면 됩니다. 백틱 기호` 로 넣는 것도 가능합니다.

 

이어서 상품 레이아웃도 만들어보겠습니다.

부트스트랩의 grid레이아웃을 사용하여 3등분된 레이아웃을 만들고 이미지를 넣겠습니다. 

import { Container, Nav, Navbar, Row, Col } from 'react-bootstrap';

// 화면 3분할
function App(){
  return (
   (생략)
    <Container>
      <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
  )
}

위의 코드를 보면 간편히 3분할된 레이아웃을 볼 수 있습니다.

물론, 리액트용이 아닌 자바스크립트에서 사용하던 부트스트랩 grid 레이아웃도 사용할 수 있습니다.

 

function App() {
  return (
      (생략)
      <Container>
        <Row>
          <Col>
            <img
              src="https://codingapple1.github.io/shop/shoes1.jpg"
              width="80%"
            />
            <h4>상품명</h4>
            <p>상품설명</p>
          </Col>
          <Col>
            <img
              src="https://codingapple1.github.io/shop/shoes2.jpg"
              width="80%"
            />
            <h4>상품명</h4>
            <p>상품설명</p>
          </Col>
          <Col>
            <img
              src="https://codingapple1.github.io/shop/shoes3.jpg"
              width="80%"
            />
            <h4>상품명</h4>
            <p>상품설명</p>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

위의 코드에서는 이미지를 import하지 않았는데, 호스팅되어 있는 외부 이미지는 절대 경로 그대로 작성하더라도 문제없이 이미지 삽입이 가능합니다.

 

public 폴더

여러가지 소스 코드는 src 폴더에 보관되면 이미지 등의 static 파일은 public 폴더에 보관해도 됩니다.

보통 react의 개발이 끝나면 build라는 작업을 합니다.

build는 코드를 하나의 파일로 압축하는 작업으로 src 폴더의 코드와 파일은 압축이 되지만, public 폴더의 파일을 그대로 보존됩니다.

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

 

그리고 public 폴더에 이미지를 저장하면 따로 import할 필요없이 이미지 경로만 집어넣어서 이미지를 사용할 수 있습니다.

 

다만, 리액트로 만든 html을 배포할 때, 경로가 'www.abc.com/어쩌구' 와 같이 뒤에 사족이 붙어버리면 이미지를 찾을 수 없다고 나옵니다.

그래서 pubilc 폴더에 이미지를 저장하고 경로를 넣을 때에는 {process.env.PUBLIC_URL + 이미지 경로} 형식으로 작성해야 이미지를 찾을 수가 있습니다.

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