React의 머리글-주요-바닥글

일반적인 웹 사이트를 생각할 때 일반적으로 상단에 머리글, 메인 섹션, 하단에 바닥글이 있는 최상위 수준의 스타일이 지정됩니다. 또한 머리글과 바닥글은 일반적으로 사이트를 탐색하고 중요한 탐색 링크를 포함할 때 일정하게 유지됩니다. React에서는 "react-router-dom"라이브러리를 사용하여 클라이언트 측 라우팅을 제공할 수 있지만 이 구조를 유지하려면 약간의 추가 생각이 필요합니다.

React-Router-Dom 라이브러리 사용

시작하려면 react-router-dom의 기본 구현을 이해해야 합니다. 이것은 일반적으로 "index.js"인 루트 파일에서 구현됩니다. 먼저 라이브러리를 가져옵니다. 라이브러리에는 기본 라우팅 기능에 필요한 3가지 기능이 있습니다: BrowserRouter, Route 및 NavLink. 이제 최상위 렌더링 구성 요소를 중첩해야 합니다. 지금은 BrowserRouter 내에서 "Main"이라고 합니다. 이것이 구성 요소 간에 라우팅할 수 있는 능력을 제공하는 것입니다.

// index.js
import {BrowserRouter, Route, NavLink} from 'react-router-dom';
import Main from './Components/Structure/Main';

ReactDOM.render(
  <React.StrictMode>
      <BrowserRouter>
        <Main />
      </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

경로를 제공하기 위해 react-router-dom 라이브러리의 Route 함수를 사용할 것입니다. 사용 가능하게 하려는 각 URL 경로에 대해 하나의 경로입니다. 각 경로에서 URL 경로와 해당 경로가 활성화될 때 렌더링되어야 하는 구성 요소를 지정합니다. 시연할 몇 가지 추가 경로를 만들어 보겠습니다.

// index.js
import {BrowserRouter, Route, NavLink} from 'react-router-dom';
import Main from './Components/Structure/Main';
import About from './Components/About/About';
import Blog from './Components/Blog/Blog';

      <BrowserRouter>
        <Route exact path="/" component={Main} />
        <Route exact path="/home" component={Main} />
        <Route exact path="/about" component={About} />
        <Route exact path="/blog" component={Blog} />
      </BrowserRouter>

여기에서 사용자가 루트 URL "/"또는 "/home"으로 이동하면 기본 구성 요소가 렌더링됩니다. 사용자가 "/about"으로 이동하면 "About"이라는 새 구성 요소가 대신 렌더링됩니다. 새 구성 요소를 사용 가능하게 하려면 Index.js 파일로 가져와야 했습니다.

사용자가 탐색할 수 있는 기능을 제공하기 위해 사용 가능한 각 경로에 NavLink를 설정해야 합니다. 각 NavLink에는 링크를 클릭할 때 탐색해야 하는 URL을 지정하는 "to"속성이 있습니다. 스타일을 추가하고 싶을 수도 있습니다. <NavLink to="/" exact style={Link} activeStyle={{background: "darkgreen"}}>Home</NavLink> . 모든 것을 분리되고 깨끗하게 유지하기 위해 Navbar라는 별도의 구성 요소에 내 링크를 설정했으므로 이제 Navbar를 Index.js로 가져오고 구성 요소를 라우터에 추가할 수 있습니다(NavLink는 라우터 외부에서 작동하지 않기 때문). 그러면 기본 구현이 완료됩니다. 알림 Navbar는 경로에 포함되어 있지 않습니다. 이는 URL에 관계없이 표시되기를 원하기 때문입니다. 이제 사용자는 클릭하면 사이트의 다른 부분으로 이동하는 링크를 볼 수 있습니다.

// index.js
      <Router>
        <Navbar />
        <Route exact path="/" component={Main} />
        <Route exact path="/home" component={Main} />
        <Route exact path="/about" component={AboutContainer} />
        <Route exact path="/blog" component={BlogContainer} />
      </Router>

머리글/바닥글 추가

머리글과 바닥글을 추가하려면 URL 경로에 의존하지 않기 때문에 라우터 외부에 구성 요소를 추가하기만 하면 됩니다. 그러나 Navbar는 Header와 별도로 렌더링되기 때문에 사용자 지정 스타일이 없으면 페이지에서 펑키하게 보일 것입니다.


이를 정리하기 위해 Index.js에서 Navbar를 가져와 대신 헤더 구성 요소에 추가할 것입니다. Navbar와 마찬가지로 경로 내에 포함하지 않습니다. 또한 이제 NavLinks가 포함된 헤더 구성 요소를 라우터로 이동해야 합니다.

이제 바닥글을 페이지 하단에 유지하기 위한 많은 CSS 트릭이 있습니다. 내 앱에서 구현한 방법은 다음과 같지만 다른 방법도 자유롭게 탐색해 보세요.

/* Set your default so that the sizing and placement is predictable */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Everything is a child of this node, so set its height to take up the full page or more, then set some padding at the bottom so your footer can slip into the gap. */
#root {
  position: relative;
  min-height: 100vh;
  padding-bottom: 20px;
}

.Header {
 position: relative;
 height: 100px;
 width: 100%;
}

.Main {
  text-align: center;
  position: relative;
}

/* Now set the height of your Footer equal to the padding that you left for it in your #root.  To make it stay at the bottom, you will set it to be absolutely positioned.  If Main grows larger, your Footer will move down to remain at the bottom of the page. */ 
.Footer {
  height: 20px;
  width: 100%;
  position: absolute;
  bottom: 0;
}

그리고 끝났습니다!

이제 페이지 상단에 NavLinks, 중간에 URL 종속 콘텐츠, 하단에 고정 Footer가 포함된 상수 헤더가 있습니다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, NavLink, Redirect, Switch} from 'react-router-dom';
import Header from './Components/Structure/Header';
import Main from './Components/Structure/Main';
import Footer from './Components/Structure/Footer';
import AboutContainer from './Components/About/AboutContainer';
import BlogContainer from './Components/Blog/BlogContainer';

ReactDOM.render(    
  <Router>
    <Header/>
      <Route exact path="/" component={Main} />
      <Route exact path="/home" component={Main} />
      <Route exact path="/about" component={AboutContainer} />
      <Route exact path="/blog" component={BlogContainer} />
    <Footer/>
  </Router>
  document.getElementById('root')
);

// Header.js
import React from 'react';
import Navbar from './Navbar';

const Header = () => {
  return (
    <div className="Header">
      <Navbar />
    </div>
  )
}

export default Header;