React 사이드바 탐색 구성요소 빌드

이 자습서에서는 슬라이드 아웃 사이드바 탐색 구성 요소를 만들 것입니다. 전통적으로 이러한 유형의 내비게이션은 모바일 장치에서 구현되었지만 데스크톱 장치에서 사용하는 것이 일반화되고 있습니다.



React Router에 대한 소개도 받을 수 있도록 탐색의 각 링크에 대한 페이지를 만들 것입니다.

React Create App 패키지를 사용하여 프로젝트를 설정하여 시작하겠습니다.

npx react-create-app react-sidebar

필요한 유일한 종속성은 React Router이므로 이것도 설치하겠습니다.

npm install react-router-dom

pages , src 및 home.js 파일이 있는 services.js 디렉토리에 contact.js 폴더를 만듭니다. 이들은 탐색에서 페이지 사이를 탐색할 수 있도록 자리 표시자 파일일 뿐입니다.

각 파일 내에서 몇 가지 간단한 콘텐츠를 렌더링하여 페이지가 언제 변경되었는지 확인할 수 있습니다. 파일 이름과 일치하도록 각 파일의 함수 이름과 텍스트를 바꿔야 합니다.

import React from "react";

function Home() {
  return (
    <div className="page">
      <h1>Home</h1>
      <p>This is the home page.</p>
    </div>
  );
}

export default Home;

다음으로 components 및 src 파일을 사용하여 Sidebar.js 디렉토리에 Sidebar.css 폴더를 만듭니다.

내부Sidebar.js에 다음 가져오기를 추가합니다.

import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./Sidebar.css";
useState hook will be used to store the “active” state of the navigation and Link is used to render the links.

다음으로 다음과 같이 Sidebar() 함수를 추가합니다.

function Sidebar() {
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  return (
    <nav className={sidebar ? "sidebar active" : "sidebar"}>
      <button className="hamburger" type="button" onClick={showSidebar}>
        <div></div>
      </button>
      <ul onClick={showSidebar}>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/services">Services</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}
export default Sidebar;

onClick가 트리거되면 사이드바 상태를 true로 설정하여 active 클래스를 추가합니다. 나중에 CSS를 적용하면 active 클래스가 사이드바의 위치를 ​​오프스크린에서 왼쪽 가장자리로 이동하는 것을 볼 수 있습니다.
<Link> 페이지 폴더의 해당 파일로 라우팅할 URL이 포함된 완전히 액세스 가능한 앵커 태그를 렌더링합니다.

사이드바 구성 요소가 완료되면 이제 App.js에 로드하고 경로를 설정할 수 있지만 먼저 가져오기:

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import Services from "./pages/Services";
import Contact from "./pages/Contact";
import Sidebar from "./components/Sidebar";
import "./App.css";

그런 다음 App() 함수를 다음과 같이 편집합니다.

function App() {
  return (
    <>
      <Router>
        <Sidebar />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/services" component={Services} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Router>
    </>
  );
}

export default App;

<Router>는 UI와 URL을 동기화 상태로 유지하는 역할을 하는 React Router의 기본 구성 요소입니다. 모든 자식 요소를 살펴보고 현재 URL과 일치하는 경로로 첫 번째 요소를 렌더링합니다.

여기까지가 JavaScript용입니다. 이제 내부에 일부 CSS를 추가할 수 있습니다Sidebar.css.

먼저 화면 밖의 사이드바의 기본 위치를 설정합니다. 그런 다음 활성 클래스가 트리거되면 브라우저의 왼쪽에 정렬되도록 위치가 변경됩니다. 사이드바에 transition가 있으므로 애니메이션이 적용됩니다.

.sidebar {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  background-color: peru;
  transition: left 300ms ease-out;
}
.sidebar.active {
  left: 0;
}

다음은 탐색의 각 링크에 대한 몇 가지 기본 스타일입니다.

.sidebar ul {
  margin: 0;
  padding: 0;
}
.sidebar li {
  list-style: none;
}
.sidebar li a {
  font-size: 18px;
  text-decoration: none;
  padding: 10px;
  display: block;
  color: #fff;
}

CSS로 햄버거(메뉴) 아이콘을 만들 수 있습니다.

.hamburger {
  border: none;
  outline: 0;
  width: 50px;
  position: absolute;
  right: -50px;
  background-color: peru;
}

.hamburger:after,
.hamburger:before,
.hamburger div {
  background-color: #fff;
  height: 5px;
  margin: 7px 0;
  border-radius: 3px;
  content: "";
  display: block;
  transition: all 300ms ease-in-out;
}

마지막으로 사이드바가 활성화되면 햄버거 아이콘을 십자 아이콘으로 변환할 수 있습니다.

.sidebar.active .hamburger:before {
  transform: translateY(12px) rotate(135deg);
}
.sidebar.active .hamburger::after {
  transform: translateY(-12px) rotate(-135deg);
}
.sidebar.active .hamburger div {
  transform: scale(0);
}

이 CSS는 햄버거 아이콘의 중간 행을 숨기고 상단( :before ) 및 하단( :after ) 행을 회전하여 십자가를 형성합니다.