호텔 검색 앱 1 - 프로젝트 셋팅 및 기본 라우터 설정하기

 

* 프로젝트 루트 폴터 생성하기

mkdir hotelsCom
cd hotelsCom

CMD 명령창에서 위와 같이 입력하고 루트 폴더를 생성하고, 폴더 내부로 이동한다.

 

* 프로젝트 기본 셋팅하기 - webpack

git clone https://github.com/sssssqew/react-webpack.git

CMD 명령창에서 위와 같이 입력하고 웹팩에 기본으로 설정되어 있는 보일러플레이트 코드를 내려받는다. 그런 다음 react-webpack 이라는 폴더명을 client 로 변경한다. 

 

* 기본 페키지 설치하기

npm install

client 폴더 내부로 이동하고, package.json 이 위치한 곳에서 위와 같은 명령어를 입력해서 package.json 에 기록된 모든 패키지들을 설치한다. 

 

* 초기 웹화면 실행하기

npm start

client 폴더 내부에서 위와 같은 명령어를 입력하면, 웹화면이 자동으로 열리면서 초기화면이 실행된다. 

 

* 기본 라우터 설정하기

import React from "react"
import ReactDOM from "react-dom"
import { BrowserRouter } from 'react-router-dom'

const App = () => {
    return (
      <div>Hello React !</div>
    );
  };
  
  ReactDOM.render(<BrowserRouter>
                    <App />
                </BrowserRouter>, document.getElementById("app"));

src > index.js 파일을 위와 같이 수정하자!

import { BrowserRouter } from 'react-router-dom'

라우터 기능을 추가하기 위하여 react-router-dom 라이브러리에서 BrowserRouter 컴포넌트를 임포트한다. 

ReactDOM.render(<BrowserRouter>
                    <App />
                </BrowserRouter>, document.getElementById("app"));

App 컴포넌트를 BrowserRouter 컴포넌트로 감싸준다. 

 

* 페이지 생성하기 - 호텔 검색 페이지, 검색된 호텔 목록 페이지, 호텔 상세정보 페이지

pages 폴더를 생성하고 하위에 아래와 같은 파일들을 생성하자!

import React from 'react'

const Search = () => {
    return (
        <div>Search Page</div>
    )
}

export default Search

Search.js 파일을 생성하고 위와 같이 작성하자!

import React from 'react'

const Hotels = () => {
    return (
        <div>Hotels Page</div>
    )
}

export default Hotels

Hotels.js 파일을 생성하고 위와 같이 작성하자!

import React from 'react'

const HotelInfo = () => {
    return (
        <div>HotelInfo Page</div>
    )
}

export default HotelInfo

HotelInfo.js 파일을 생성하고 위와 같이 작성하자!

import React from 'react'

const NotFound = () => {
    return (
        <div>NotFound Page</div>
    )
}

export default NotFound

NotFound.js 파일을 생성하고 위와 같이 작성하자!

export { default as Search } from './Search'
export { default as Hotels } from './Hotels'
export { default as HotelInfo } from './HotelInfo'
export { default as NotFound } from './NotFound'

index.js 파일을 생성하고 위와 같이 작성하자!

 

* 페이지 라우팅 설정하기

import React from "react"
import ReactDOM from "react-dom"
import { BrowserRouter, Route, Routes } from "react-router-dom"
import { Search, Hotels, HotelInfo, NotFound } from 'pages'

const App = () => {
  return (
    <div>
      <Routes>
          <Route path='/' element={<Search/>}/>
          <Route path="/hotels" element={<Hotels/>}/>
          <Route path="/hotelInfo" element={<HotelInfo/>}/>
          <Route path='*' element={<NotFound/>}/>
      </Routes>
    </div>
  );
};
  
ReactDOM.render(<BrowserRouter>
                  <App />
                </BrowserRouter>, 
                document.getElementById("app"))

src > index.js 파일을 위와 같이 수정하자!

import { BrowserRouter, Route, Routes } from "react-router-dom"

페이지 라우팅 기능을 적용하기 위하여 react-router-dom 라이브러리에서 BrowserRouter, Route, Routes 컴포넌트를 임포트한다. 

import { Search, Hotels, HotelInfo, NotFound } from 'pages'

pages 폴더 내부의 페이지 컴포넌트들을 임포트한다. 

<Routes>
    <Route path='/' element={<Search/>}/>
    <Route path="/hotels" element={<Hotels/>}/>
    <Route path="/hotelInfo" element={<HotelInfo/>}/>
    <Route path='*' element={<NotFound/>}/>
</Routes>

Routes, Route 컴포넌트를 사용하여 URL 경로에 따라 해당 페이지를 보여줄 수 있도록 설정한다. 웹서비스가 처음 구동되면 화면에 호텔 검색을 위한 페이지가 먼저 보여진다. 사용자가 호텔을 검색하면 /hotels 경로로 이동하면서 검색된 호텔 목록이 보여진다. 그런 다음 사용자가 특정 호텔을 선택하면 /hotelInfo 경로로 이동하면서 해당 호텔에 대한 자세한 정보가 화면에 나타난다. 

 

* 글로벌 스타일 설정하기

body{
    margin: 0;
    padding: 0;
}

src > index.css 파일을 생성하고 위와 같이 작성하자!

import './index.css'

src > index.js 파일에 위 코드를 추가하여 글로벌 스타일을 설저한다.