티스토리 뷰

수업/└리액트(React)

[08]부트스트랩(Bootstrap)

onlyun 2022. 4. 27. 09:52

[ 리액트 전용 부트스트랩 ]을 사용하기 위해선
부트스트랩 기본 개념을 알고 있어야 함.

 

【 기본 부트스트랩(Bootstrap) 】

w3school에서 사용방법 등을 알 수 있음.

 

※ 새 폴더 생성 - 부트스트랩 관련 작업할 프로젝트 ※

▶VSCODE 터미널에서

>>cd .. 상위 폴더 이동
>>yarn create react-app react-study03 생성
>>cd react-study03 생성한 폴더 이동
>>yarn start 생성한 yarn 시작

└현재 작업 공간이 어디냐에 따라서 cd ..해도 디고 안해도 되고

 

▶react-study03 폴더에 .prettierrc 복붙해두기

▶VSCODE에서 폴더 열기 : react-study03

▶src > bs 폴더 생성 > test1.html 생성

[ 부트스트랩 사용하지 않았을 때, ]

스타일 일일이 지정해줘야 함.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .h1-big {
        font-size: 50px;
      }
      .btn-blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>h1 태그 사용하기</h1>
    <h1 class="h1-big">h1보다 큰 글자를 사용할 경우</h1>

    <button>기본 버튼 사용</button>
    <button class="btn-blue">색상 변경</button>
  </body>
</html>

 

2. 부트스트랩

(1) 부트스트랩 사용하기_간단

-홈페이지에서 [download] or [get start] 선택

-[get Start]에서 CSS랑 JS 코드 복붙

 

-CSS

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

-JS : bundle/ seperate있는데 아무거나 사용. ↓번들↓

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

 

이미 지정되어 있는 스타일을 사용하려면 클래스 이름만 맞춰주면 스타일 지정됨.

 

(1-2) 적용 : test1.html의 <h1> 태그

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <style>
      .h1-big {
        font-size: 50px;
      }
      .btn-blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>h1 태그 사용하기</h1>
    <h1 class="h1-big">h1보다 큰 글자를 사용할 경우</h1>

    <button>기본 버튼 사용</button>
    <button class="btn-blue">색상 변경</button>

    <hr />

    <h1>h1 기본 태그 사용</h1>
    <h1 class="display-1">부트스트랩을 사용해서 큰 글자</h1>

    <button>기본 버튼 사용</button>
    <button class="btn btn-primary">색상 변경</button>
  </body>
</html>

>> 결과

 

(1-3) 적용 : test1.html의 <table> 태그

<table style="border: solid 1px">
      <thead>
        <tr>
          <th>순번</th>
          <th>이름</th>
          <th>성별</th>
          <th>직업</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>아이유</td>
          <td>여성</td>
          <td>가수</td>
        </tr>
        <tr>
          <td>2</td>
          <td>유재석</td>
          <td>남성</td>
          <td>방송인</td>
        </tr>
      </tbody>
      <tfoot></tfoot>
    </table>

    <table class="table table-hover table-striped">
      <thead>
        <tr>
          <th>순번</th>
          <th>이름</th>
          <th>성별</th>
          <th>직업</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>아이유</td>
          <td>여성</td>
          <td>가수</td>
        </tr>
        <tr>
          <td>2</td>
          <td>유재석</td>
          <td>남성</td>
          <td>방송인</td>
        </tr>
      </tbody>
      <tfoot></tfoot>
    </table>

>> 결과

부트스트랩 cdn 적용 및 ??

(2) 부트스트랩 - Container

(2-1) test2.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--부트스트랩 사용하기-->
    <!--cdn을 통해서 부트스트랩 파일을 로딩하여 jsp나 spring에 적용하여 사용할 수 있음.-->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <!--부트스트랩은 Web UI 라이브러리로 CSS 디자인 부분을 미리 디자인된 것을 가져와서 사용-->
    <!--필요한 부분에 대해서 css 부분을 수정하여 원하는 디자인으로 변경하여 사용 가능-->
    <!-- 부트스트랩 적용 : 기본적으로 class명을 사용 -->
    <!-- 
※ 부트스트랩 기본 개념 : Container ※
-Container : 부트스트랩을 사용하여 UI를 구성할 때 가장 기본이 되는 패널
 └container : 좌우측에 공백이 존재하는 형태의 패널
 └container-fluid : 좌우측에 공백이 없는 전체 화면 형태의 패널
 -->
    <br />
    <div class="container bg-primary">Container 사용</div>
    <br />
    <div class="container-fluid bg-success">Container-fluid 사용</div>
  </body>
</html>

>>Open with Live Server

(3) 부트스트랩 - Grid

(3-1) Grid System
-웹 화면을 총 12개 칸으로 구분(1x12) → 컨텐츠에 따라서 12개의 칸을 각각 그룹핑하여 UI를 표시
-grid system 사용
 container/container-fluid 내에서 row(행), col(열)을 사용하여 grid 지정
 (테이블의 <tr> - <td> 관계와 같음)

따로 설정하지 않으면, 균등 크기 설정

 

(3-2) 실습

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--부트스트랩 사용하기-->
    <!--cdn을 통해서 부트스트랩 파일을 로딩하여 jsp나 spring에 적용하여 사용할 수 있음.-->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <!--부트스트랩은 Web UI 라이브러리로 CSS 디자인 부분을 미리 디자인된 것을 가져와서 사용-->
    <!--필요한 부분에 대해서 css 부분을 수정하여 원하는 디자인으로 변경하여 사용 가능-->
    <!-- 부트스트랩 적용 : 기본적으로 class명을 사용 -->
    <!-- 
※ 부트스트랩 기본 개념 : Container ※
-Container : 부트스트랩을 사용하여 UI를 구성할 때 가장 기본이 되는 패널
 └container : 좌우측에 공백이 존재하는 형태의 패널
 └container-fluid : 좌우측에 공백이 없는 전체 화면 형태의 패널
-->
    <br />
    <div class="container bg-primary">Container 사용</div>
    <br />
    <div class="container-fluid bg-success">Container-fluid 사용</div>

    <!--
※ Grid System ※
-웹 화면을 총 12개 칸으로 구분(1x12) → 컨텐츠에 따라서 12개의 칸을 각각 그룹핑하여 UI를 표시
-grid system 사용
 container/container-fluid 내에서 row(행), col(열)을 사용하여 grid 지정
 (테이블의 <tr> - <td> 관계와 같음)
-->

    <div class="container">
      <div class="row">
        <div class="col border">col 1</div>
        <div class="col border">col 2</div>
        <div class="col border">col 3</div>
        <div class="col border">col 4</div>
        <div class="col border">col 5</div>
        <div class="col border">col 6</div>
        <div class="col border">col 7</div>
        <div class="col border">col 8</div>
        <div class="col border">col 9</div>
        <div class="col border">col 10</div>
        <div class="col border">col 11</div>
        <div class="col border">col 12</div>
      </div>

      <br />
      <div class="row">
        <div class="col border">2</div>
        <div class="col-2 border">2</div>  <!--col-2는 <colspan="2"와 같음-->
        <div class="col-2 border">2</div>
        <div class="col border">2</div>
      </div>

      <br />
      <div class="row">
        <div class="col border">3</div>
        <div class="col border">3</div>
        <div class="col border">3</div>
        <div class="col border">3</div>
      </div>

      <br />
      <div class="row">
        <div class="col border">4</div>
        <div class="col border">4</div>
        <div class="col border">4</div>
      </div>

      <br />
      <div class="row">
        <div class="col border">4</div>
        <div class="col-8 border">8</div>
      </div>

      <br />
      <div class="row">
        <div class="col border">6</div>
        <div class="col border">6</div>
      </div>

      <br />
      <div class="row">
        <div class="col border">12</div>
      </div>
      <!-- container -->
    </div>
  </body>
</html>

 

>> 결과

 

(3-3) 반응형 웹 지원

-col 클래스에 반응형 웹을 지원하는 옵션 사용 → 해당 크기에 맞는 화면 구현 가능

-[ col-반응형 크기 - 그룹핑 크기]로 하여 class 입력

sm md lg xl xxl
가로너비 576px이하 가로너비 768px이하 가로너비 992px이하 가로너비 1200px이하 가로너비 1400px이하

└일 때, 하나의 컨테이너로 표현

<!--
반응형 웹 설정 :: class="col-반응형크기-그룹핑크기"
-->
    <div class="container">
      <div class="row">
        <div class="col-md border">?</div> <!--768px 이하로 떨어지면 (1x30 → (3x1) 변경됨-->
        <div class="col-md border">?</div>
        <div class="col-md border">?</div>
      </div>
    </div>

 

(+) 그룹핑크기 지정

<div class="container">
      <div class="row">
        <div class="col-md-3 border">?</div>
        <div class="col-md-6 border">?</div>
        <div class="col-md-3 border">?</div>
      </div>
    </div>

 

【 리액트 전용 부트스트랩(Bootstrap) 】

3. 리액트용 부트스트랩 설치

(1) 리액트용 부트스트랩 설치

(1-1) 설치 cmd / vscode terminal

>>yarn add react-bootstrap bootstrap

>>최신 버전으로 설치 됨_버전확인은 react-bootstrap 페이지에서

success Saved lockfile.
success Saved 13 new dependencies.
info Direct dependencies
├─ bootstrap@5.1.3
└─ react-bootstrap@2.3.0
info All dependencies
├─ @popperjs/core@2.11.5
├─ @react-aria/ssr@3.1.2
├─ @restart/hooks@0.4.6
├─ @restart/ui@1.2.0
├─ @types/react-transition-group@4.4.4
├─ @types/warning@3.0.0
├─ bootstrap@5.1.3
├─ classnames@2.3.1
├─ dom-helpers@5.2.1
├─ prop-types-extra@1.1.1
├─ react-bootstrap@2.3.0
├─ react-lifecycles-compat@3.0.4
└─ react-transition-group@4.4.2
Done in 13.85s.

 

(+) !! 설치 시 주의사항 !!

-bootstrap.min.css를 index.js에 import해서 사용

import 'bootstrap/dist/css/bootstrap.min.css';

 

(1-2)  CDN 설치

-cdn 사용 시 bootstrap.min.css를 import할 필요없음.

-index.html에 bootstrap 파일 로딩(css, js)

 홈페이지에서 링크 복붙해서 쓰면 됨. https://react-bootstrap.github.io/getting-started/introduction/

 

 

(2) 리액트용 부트스트랩 사용 - <Button> 기준

 

(2-1) 리액트용 부트스트랩 사용 : 설치

-설치 방법은 위 참고. 설치한 것을 Import(로딩) : index.js

import 'bootstrap/dist/css/bootstrap.min.css'; //설치 시 이거 import해줘야 Error없이 사용가능

(+) import 방법 2개

import Button from 'react-bootstrap/Button'; //필요한 것만 쓸 때,
// import {Button} from 'react-bootstrap'; //필요한 거 여러 개 쓸 때,

//여러 개를 쓸 때, 하나하나 다 경로? 입력해줘야 함.
import Table from 'react-bootstrap/Table';
import Dropdown from 'react-bootstrap/Dropdown';
//그럴 때,
import {Button, Table, Dropdown} from 'react-bootstrap';

 

 

-사용할 부트스트랩 로딩(Import) : src / App.js

import logo from './logo.svg';
import './App.css';
import Button from 'react-bootstrap/Button'; //필요한 것만 쓸 때,
// import {Button} from 'react-bootstrap'; //필요한 거 여러 개 쓸 때,

//리액트용 부트스트랩 사용하기

function App() {
  return (
    <div className="App">
      <br />
      <Button>리액트용 부트스트랩 버튼</Button>
    </div>
  );
}

export default App;

 

>> Open Live Server

 

 

(+) 버튼 스타일 변경하고 싶다면, 클래스명 부여_지정된 클래스명으로

<Button className="btn btn-info">리액트용 부트스트랩 버튼</Button>

 

(2-1-1) react-bootstrap <Button> 사용

-index.js에 import 되어 있는지 확인_CDN이 아닌 설치해서 사용하는 거라면 import 반드시 필요

import 'bootstrap/dist/css/bootstrap.min.css';

-src / bstest1.js

import React from 'react';
import { Button } from 'react-bootstrap';

function BSTest1() {
  return (
    <div>
      <h1>기본 방식으로 부트스트랩 사용</h1>
      <Button variant="btn"> 기본버튼 </Button>
      <Button variant="btn btn-primary">Primary type</Button>
      <Button variant="btn btn-success">Success type</Button>
      <Button variant="btn btn-outline-primary">Outline-primary type</Button>
      <Button variant="btn btn-outline-info">Outline-info type</Button>
      <Button variant="btn btn-outline-warning">Outline-warning type</Button>
      <Button variant="danger">Theme Color : danger</Button>
      <Button variant="light">Theme Color : light</Button>
      <Button variant="link">link button type</Button>
    </div>
  );
}

export default BSTest1;

-App.js

import logo from './logo.svg';
import './App.css';

//import Button from 'react-bootstrap/Button'; 
// import {Button} from 'react-bootstrap';
//BSTest1.js에서 import 해주고 있기 때문에 App.js에서까지 할 필요 없음.
import BSTest1 from './bstest1';

//리액트용 부트스트랩 사용하기

function App() {
  return (
    <div className="App">
      <br />
      <BSTest1 />
    </div>
  );
}

export default App;

 

-실행 결과 : 각 버튼의 hover 등의 스타일 확인.

 

(2-3) 리액트용 부트스트랩 사용 : CDN

-src / BSTest2.js 생성

import React from 'react';

function BSTest2() {
  return <div></div>;
}

export default BSTest2;

-App.js

// import logo from './logo.svg';
import './App.css';
// import BSTest1 from './bstest1';
import BSTest2 from './BSTest2';

function App() {
  return (
    <div className="App">
      <br />
      {/* <BSTest1 /> */}
      <BSTest2 />
    </div>
  );
}

export default App;

-index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// import 'bootstrap/dist/css/bootstrap.min.css'; //이거 주석처리했음

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

reportWebVitals();

-public / index.html

 리액트 부트스트르배 홈페이지에서 CDN 코드 가져와 붙여넣기 : get start -> css, js

    <!--React Bootstarp CDN : css-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

 

-BSTest2.js

import { Button } from 'bootstrap';
import React from 'react';

function BSTest2() {
  return(
      <div>
          <button type="button" class="btn btn-primary">PRIMARY BUTTON</button>
          <button type="button" class="btn btn-success">SUCCESS BUTTON</button>
          <button type="button" class="btn btn-info">INFO BUTTON</button>
          <button type="button" class="btn btn-warning">WARNGING BUTTON</button>
          <button type="button" class="btn btn-outline-danger">OUTLINE-DANGER BUTTON</button>
          <button type="button" class="btn btn-link">LINK BUTTON</button>
      </div>
  );
}

export default BSTest2;

 

>> 결과

 

(3) 실습 : 부트스트랩으로 UI 만들기

-CDN 방식 사용

 

(3-1) home.js

import React from 'react';

function Home() {
  return <></>;
}

export default Home;

 

(3-2) App.js

// import logo from './logo.svg';
import './App.css';
// import Button from 'react-bootstrap/Button'; //필요한 것만 쓸 때,
// import {Button} from 'react-bootstrap';
// import BSTest1 from './bstest1';
// import BSTest2 from './BSTest2';
import Home from './home';

function App() {
  return (
    <div className="App">
      <br />
      {/* <BSTest1 /> */}
      {/* <BSTest2 /> */}
      <Home />
    </div>
  );
}

export default App;

 

>> Home.js

import React from 'react';
import './Home.css';

function Home() {
  return (
    <div>
      <div class="bg-primary text-white text-center">
        <h1>My First bootstrap5 Page</h1>
        <p>반응형 웹 지원됨</p>
      </div>
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <div class="container-fluid">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" href="#">
                Active
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                Link
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                Link
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">
                Disabled
              </a>
            </li>
          </ul>
        </div>
      </nav>

      {/* main */}
      <div class="container mt-5">
        <div class="row">
          {/* sidebar  */}
          <div class="col-sm-4">
            <h2>About me</h2>
            <h5>Photo of me:</h5>
            <div className="fakeimg">Fake image</div>
            <p>Hello Bootstrap World</p>

            <h3 class="mt-4">Some Links</h3>
            <p>Hello Bootstrap World</p>
            <ul class="nav nav-pills flex-column">
              <li class="nav-item">
                <a class="nav-link active" href="#">
                  Active
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  Link
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  Link
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">
                  Disabled
                </a>
              </li>
            </ul>
            <hr class="d-sm-none"></hr>
          </div>

          {/* main content */}
          <div class="col-sm-8"></div>
        </div>
      </div>

      {/* footer */}
      <div class="mt-5 p-4 bg-dark text-white text-center">Footer</div>
    </div>
  );
}

export default Home;

 

(3-3) Home.css

.fakeimg {
  height: 200px;
  background-color: #aaa;
}

 

>> 결과

 

(3-4) main content 내용 만들기

import React from 'react';
import './Home.css';

function Home() {
  return (
...
          {/* main content */}
          <div class="col-sm-8">
            <h2>Title Heading</h2>
            <h5>Title description, 2022.4.27</h5>
            <div className="fakeimg">Fake images</div>
            <p>아무 글자 입력..</p>
            <p>.........................................................</p>

            <h2 class="mt-5">제목</h2>
            <h5>글 설명, 2022.4.27</h5>
            <div className="fakeimg">Fake images</div>
            <p>아무 글자 입력..</p>
            <p>.........................................................</p>
          </div>
        </div>
      </div>
...
  );
}

export default Home;

 

(4) 실습 문제 : home.js 나누어서 인클루드 시키기

(문제1) Home.js, Home.css 파일을 활용,

Home2.js, Home2.css 파일을 생성하고 Home.js에 있는 소스의 내용을 header, main, footer 파일로 구분하여

각각의 파일로 분리하여 저장하고

Home2.js에서 통합해서 죄종 출력하는 프로그램 장성

 

-조건 :

 Home2.js에 header, main, footer 조합

 App.js에서 Home2.js 호출

 

>> 기존에 만들었던 Home.js의 코드를 복붙해서 쓰면 됨.

 

(4-2) Home2.js

import React from 'react';
import './Home';
import Header from './Header';
import Main from './Main';
import Footer from './Footer';

function Home2() {
  return (
    <div>
      <div class="bg-primary text-white text-center">
        <h1>My First bootstrap5 Page</h1>
        <p>반응형 웹 지원됨</p>
      </div>
      {/* nav */}
      <Header />
      {/* main */}
      <Main />
      {/* footer */}
      <Footer />
    </div>
  );
}

export default Home2;

 

(4-3) Header.js

import React from 'react';

function Header() {
  return (
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <div class="container-fluid">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="#">
              Active
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              Link
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              Link
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">
              Disabled
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
}
export default Header;

(4-4) Main.js

 

(4-5) Footer.js

 

(4-6) App.js

// import logo from './logo.svg';
import './App.css';
import Home2 from './Home2';

function App() {
  return (
    <div className="App">
      <br />
      {/* <BSTest1 /> */}
      {/* <BSTest2 /> */}
      {/* <Home /> */}
      <Home2 />
    </div>
  );
}

export default App;

YEAP

 

 

저작자표시 (새창열림)

'수업 > └리액트(React)' 카테고리의 다른 글

[09]리액트, 스프링프레임워크 연동  (0) 2022.04.28
[08-1] 실습 : 부트스트랩_state  (0) 2022.04.27
[07]라우트  (0) 2022.04.22
[06]비동기 통신 모듈 : Axios & 영화 정보 불러오기  (0) 2022.04.22
[00]컴포넌트 실습 - 시간에 따라 출력문 변경  (0) 2022.04.21
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함