[SpringBoot] Intellij + React + Bootstrap + Router 적용하기

이전글

https://greed-yb.tistory.com/300

[SpringBoot] Intellij + React 생성 및 한번에 빌드하기

 

 

Bootstrap 다운로드

https://startbootstrap.com/

Start Bootstrap

 

마음에 드는 것을 다운로드 한다

 

 

 

 

 

 

 

Bootstrap 적용하기

public 경로에 다운로드 한 파일들을 넣어준다

 

 

src 경로에 components 폴더를 생성해준다

 

파일을 생성한다

 

// Footer
import React, {} from "react";

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

export default Footer;



// Header
import React, {} from "react";

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

export default Header;



// Home
import React, {} from "react";

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

export default Home;

 

---

 

App.js 에 components 를 추가한다

 

import './App.css';
import React, {} from "react";
import Header from "./components/Header";
import Home from "./components/Home";
import Footer from "./components/Footer";

function App(){
  return(
      <div className="App">
        <Header/>
        <Home/>
        <Footer/>
      </div>
  )
}

export default App;

 

 

 

 

 

 

 

Bootstrap - index.html 을 파일로 열어준다

 

해당 부분을 복사

 

public/index.html - title 태그 밑에 복사한 코드를 넣고 17번 link 경로 처럼 %PUBLIC_URL% 경로를 추가해준다

 

scripts.js 코드가 누락되었다 같이 추가해주자

 

 

 

 

 

Bootstrap - index.html 에서 header 에 넣을 코드를 복사한다

 

Header.js 에 붙여 넣는다

React.js 에서 <!-- --> 주석은 동작하지 않아 오류가 발생하니

주석을 제거하거나 다른 주석으로 변경해야 한다

 

Header.js 가 정상적으로 동작하고 있다

 

Header.js 가 정상적으로 동작하는 것을 확인했으니 Home.js 와 Footer.js 로 작업해 준다

 

 

해당 css 는 주석 처리한다

 

 

 

서버를 재시작하면 Header, Home, Footer 가 정상적으로 나오고 있다

 

 

 

 

 

 

Router 적용하기

npm install react-router-dom

Terminal 에서 명령어를 입력하여 Router 를 설치한다

 

 

src 하위에 pages 폴더를 생성하고 메뉴에 사용할 화면들을 생성한다

해당 소스코드는 사용하는 Bootstarp 마다 다르기 때문에 생략하겠다

 

 

 

Navigation 기능을 가지고 있는 Header.js 에서

<a> 태그를 <Link> 으로 변환한다

잊지 말고 href -> to 로 변환하길 바란다

 

 

 

 

App.js 에 Router 를 적용시킨다

 

Route를 사용할 때 Routes 로 감싸줘야 하며 최상위에 BrowserRouter 로 감싸야한다

 

 

메뉴를 선택할때 마다 주소변경 및 화면이 바뀌고 있다

 

 

---

중간에 몇번 끊었다가 글을 작성하려니 흐름이 끊겨서 내용이 이상할 수도 있다

흐름만 알고 가자