내비게이션 만들어 보기

Navigation 컴포넌트 만들기

components 폴더에 Navigation.js 파일을 만들고 2개의 a 엘리먼트를 반환하도록 JSX을 작성합니다.

import React from "react";

function Navigation() {
  return (
    <div>
      <a href="/">홈</a>
      <a href="/about">대해서</a>
    </div>
  );
}

export default Navigation;

 

Navigation 컴포넌트 App 컴포넌트에 포함시키기

App 컴포넌트에 Navigation 컴포넌트를 포함시켜봅시다. Navigation.js를 임포트하고 <HashRouter></HashRouter> 사이에 포함시키면 됩니다.

import React from "react";
import "./App.css";
import { HashRouter, Route, Routes } from "react-router-dom";
import About from "./routes/About";
import Home from "./routes/Home";
import Navigation from "./components/Navigation";

function App() {
  return (
    <HashRouter>
      <Navigation />
      <Routes>
        <Route path="/" exact={true} Component={Home} />
        <Route path="/about" Component={About} />
      </Routes>
    </HashRouter>
  );
}

export default App;

 

 

 

 

영화 앱을 실행하면 왼쪽 위에 Navigation 컴포넌트가 출력하는 Home, About 링크(a 엘리먼트)를 확인할 수 있을 것입니다.

하지만, Home 링크를 눌러 보면 리액트가 죽고, 새 페이지가 열리는 문제가 발생합니다. 이것은 a 엘리먼트의 특징 때문입니다. a 엘리먼트의 href 속성은 페이지 전체를 다시 그립니다.

이 문제를 해결하려면 react-router-dom의 Link 컴포넌트를 사용하면 됩니다.

 

a 엘리먼트 Link 컴포넌트로 바꾸기

import React from "react";
import { Link } from "react-router-dom";

function Navigation() {
  return (
    <div>
      <Link to="/">홈</Link>
      <Link to="/about">대해서</Link>
    </div>
  );
}

export default Navigation;

 

 

Navigation 컴포넌트 스타일링하기

마지막으로 내비게이션을 스타일링해봅시다. components  폴더에 Navigation.css 파일을 만들고 아래와 같이 작성한 다음 Navigation.css 파일을 만들고 아래와 같이 작성한 다음 Navigation 컴포넌트에 임포트시킵시다.

또, Navigation.css 파일을 Navigation 컴포넌트에 적용시키기 위해 Naviation 컴포넌트의 JSX를 수정합니다.

.nav {
  z-index: 1;
  position: fixed;
  top: 50px;
  left: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 10px 20px;
  box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
    0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
  border-radius: 5px;
}

@media screen and (max-width: 1090px) {
  .nav {
    left: initial;
    top: initial;
    bottom: 0px;
    width: 100%;
  }
}

.nav a {
  text-decoration: none;
  color: #0008fc;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  font-weight: 600;
}

.nav a:not(:last-child) {
  margin-bottom: 20px;
}

 

import React from 'react';
import { Link } from 'react-router-dom';
import './Navigation.css';

function Navigation() {
  return (
    <div className="nav">
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </div>
  );
}

export default Navigation;

 

 

 

 

화면 폭이 넓어지면 왼쪽에 화면 폭이 좁아지면 아래에 내비게이션이 놓일 것입니다.