[코딩애플] 쇼핑몰 프로젝트 Part1 - React Bootstrap 라이브러리, export default / import 문법

Frontend 📚/React

[코딩애플] 쇼핑몰 프로젝트 Part1 - React Bootstrap 라이브러리, export default / import 문법

leejaejae 2023. 10. 16. 15:23

✏️ 시작 전에 새로운 리액트 프로젝트 생성! 아래 참고.

2023.10.11 - [React/[완강] [코딩애플] React 리액트 기초부터 쇼핑몰 프로젝트까지!] - [ 코딩애플 ] React 리액트 기초 Part1

[ 코딩애플 ] React 리액트 기초 Part1

✏️ 개발환경 설치 및 세팅 1. 구글에 Nodejs를 검색해서 LTS라고 써있는 버전을 설치 2. Visual Studoi Code 에디터 설치 ✏️ 리액트 프로젝트 생성 1. 작업용 폴더 만들기(찾기 쉽게 바탕화면에 만들기

jaejae-sosp.tistory.com

✏️ React-Bootstrap 라이브러리 설치 및 사용

- react bootstrap 사용하면 버튼, 메뉴에 적용되는 html, css 직접 디자인하지 않아도 된다..!

✏️ 설치
1. 에디터에서 터미널 열고 아래 코드 입력

npm install react-bootstrap bootstrap

2. 어떤 스타일은 Bootstrap CSS 파일을 요구하는 경우가 있다
- 그래서 그냥 그 사이트에 있는 CSS 파일을 index.html 파일의 <head> 태그 안에 복붙

- 길어서 싫으면 App.js에 import 'bootstrap/dist/css/bootstrap.min.css'; 이렇게 집어넣어도 됨

✏️ React-Bootstrap 사용법
- 예를 들어 버튼이 필요하면 React-Bootstrap 사이트에서 검색해서 에제코드를 복붙하면 버튼 생성 끝이다.

import {Button} from 'react-bootstrap'

function App(){
  return (
    <div>
      <Button variant="primary">Primary</Button>  <!-- 파란 버튼 생성 -->
    </div>
  )
}

- 상단메뉴바 예시

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

function App(){
  return (
    <div>
      <Navbar bg="dark" variant="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>
  )
}

💁‍♀️ 대문 만들기

- 메인 페이지에 큰 이미지를 넣어보자

(App.css)

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

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

✏️ html 안에 src 폴더의 이미지를 넣고 싶으면
- 이미지를 import 해오고 사용해야 한다.

import bg from './bg.png'  // import 작명 from './이미지경로'

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

- 이미지경로가 필요한 곳에서 작명한 걸 사용해도 된다. <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>

💁‍♀️ 쇼핑몰 상품 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 폴더의 용도

- 여러가지 소스코드는 src 폴더에 보관하면 되는데 이미지같은 state 파일의 경우 public 폴더에 보관해도 된다

- 리액트로 개발을 끝내면 build 작업이라는걸 하는데 지금까지 짰던 코드를 한 파일로 압축해주는 작업이다
- src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해준다.

- 그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 예를 들면 이미지, txt, json 등과 같이 수정이 필요없는 static 파일들이 그 경우이다.

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

<img src="/logo192.png" />  <!-- /이미지 경로 -->

<!-- 권장 방식 -->
<img src={process.env.PUBLIC_URL + '/logo192.png'} /> 
<!-- 
리액트로 만든 html 페이지를 배포할 때 codingapple.com/어쩌구/ 경로에 배포하면 
/logo192.png 이렇게 쓰면 파일을 찾을 수 없다고 나올 수도 있음.
그래서 /어쩌구/ 를 뜻하는 process.env.PUBLIC_URL 이것도 더해주면 됨.
-->

- 그래서 페이지에 이미지 100장을 넣어야하는 경우, public 폴더에 넣으면 import 100번 안해도 됨! 편리!

✏️ export default / import 문법

💁‍♀️ 필요한 상품 데이터

[
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000
  },

  {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000
  },

  {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000
  }
]

- 실제 서비스였으면 서버에서 받아옴!

✏️ export default / import 문법
- 위에 있는 상품 정보를 useState() 안에 넣기엔 너무 길기 때문에 다른 파일에 보관했다가 import해서 사용할 수 있다
- 예를 들어 data.js라는 파일에 있던 변수를 App.js에서 가져와서 쓰고 싶으면

// data.js 파일

let a = 10;
export default a;

- export default 변수명: 이렇게 쓰면 원하는 변수를 밖으로 내보낼 수 있다

// App.js 파일

import a from './data.js';
console.log(a)

- export 했던 변수를 다른 파일에서 사용하고 싶으면 import 작명 from './파일경로'하면 된다.

- 유의점!
- 변수, 함수, 자료형 모두 export 가능
- 파일마다 export default 라는 키워드는 하나만 사용 가능
- 파일 경로는 ./ 부터 시작해야한다. 현재경로라는 뜻

✏️ export { } / import { } 문법
- 여러개의 변수들을 내보내고 싶으면 아래와 같은 문법 사용

// data.js 파일

var name1 = 'Kim';
var name2 = 'Park';
export { name1, name2 }

- 그럼 원하는 변수, 함수 등을 여러개 내보낼 수 있다.

// App.js 파일

import { name1, name2 } from './data.js';

- export {} 이걸로 내보냈으면 가져다가 쓸 때 import {} 문법 사용

- 유의점!
- export {} 했던 것들은 import {} 쓸 때 자유작명이 불가능함. export 했던 변수명 그대로 적어야 함.

💁‍♀️ 상품 데이터 다른 파일에 저장해보기

// data.js 파일

let data = [
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000
  },

  {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000
  },

  {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000
  }
] ;
export default data

// App.js 파일

import data from './data.js';

function App(){
  let [shoes] = useState(data);
  return (
    <div className="App">
      (생략)
      <div className="container">
        <div className="row">
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
            <h4>{ shoes[0].title }</h4>
            <p>{ shoes[0].price }</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>
  )
}

}

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.

저작자표시

'Frontend 📚 > React' 카테고리의 다른 글

[코딩애플] 쇼핑몰 프로젝트 Part3 - Styled Components (0)	2023.10.17
[코딩애플] 쇼핑몰 프로젝트 Part2 - 컴포넌트, 리액트 라우터, usenavigate() (0)	2023.10.17
[ 코딩애플 ] React 리액트 기초 Part5 (1)	2023.10.14
[ 코딩애플 ] React 리액트 기초 Part4 (0)	2023.10.14
[ 코딩애플 ] React 리액트 기초 Part3 (0)	2023.10.14

현재글[코딩애플] 쇼핑몰 프로젝트 Part1 - React Bootstrap 라이브러리, export default / import 문법

JAEJAE imojeomo

승재의 개발 관련 이모저모 Github - github.SeungjaeLee00

Today :
Yesterday :

JAEJAE imojeomo