[react] 노마드코더 영화웹서비스 제작 6.2 Building the Navigation

네비게이션이 라우터와 관련된 처음 듣는 용어일 거라고 생각했는데, 네비게이션 바 얘기할 때 그 네비게이션이란 것을 깨달았다.
우리는 홈과 어바웃 두 개의 버튼만 만들어 줄 계획이다.

먼저 Navigation.js 를 새로 만들어주고
<a>Home</a>과 <a>about</a>를 리턴하는 함수형 컴포넌트를 만든다.

문제

<a>태그 사용시 home을 클릭하면 아예 새로고침 되어버리는 상황이 발생한다. SPA에서 별로 바라지 않는 상황이다.

해결

그래서 link를 import하기로 했다.

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

return(
   <div>
     <Link to="/">Home</Link>
     <Link to="/about">About</Link>
   </div>
);

🧭 네비게이션: 기억해야 할 두 가지

1. 라우터 밖에서 Link 쓸 수 없음
2. 그렇다고 모든 걸 라우터 안에 쓸 필요는 없음 = Link를 굳이 쓸 필요 없는 경우
   ex) 푸터같이 아예 다른 페이지로 가는 경우에는 Router 밖에 써도 된다. 이럴 때는 라우터 밖에 Fragment <>...</>를 한 번 씌워준다.

참고로 라우터는 해쉬라우터 외에 브라우저 라우터도 있는데, 이건 도메인에 #샵이 안 붙는다. 그런데 이번에 쓴 이유는, 브라우저 라우터가 gh-pages에 쓰기에 불편하기 때문이라고..

코드_최종

// ***Navigation.js***
import React from 'react';
import {Link} from 'react-router-dom';
function Navigation (){
  return(
    <div className="routes">
       <button className="Home route">
         <Link to="/">Home</Link>
       </button>
       <button className="About route">
         <Link to="/about">About</Link>
       </button>
    </div>
  )
}
export default Navigation;

// ***App.js***
import React from 'react';
import {HashRouter, Route} from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";
import Navigation from "./components/Navigation";
function App(){
  return(
  <HashRouter>
    <Navigation />
    <Route path="/" exact={true} component={Home} />
    <Route path="/about" component={About} />
  </HashRouter>
  ) 
}
export default App;

CSS

수업이 끝나고 따로 스타일링을 하면서 수정한 것들을 기록해보려 한다.
을 App.js에 넣었기 때문에 로딩중에도 홈/어바웃 버튼이 보이고, 다들 배경을 담당하는 div의 크기가 다른 것인지 가운데 정렬한 홈/어바웃 버튼이 가로로 조금 움직여서 앱에서는 을 제거하고 Home.js({isLoading?(‥):(<div>‥<Navigation />)})와 About.js에 각각 넣어주었더니 보기 좋아졌다.

• Link는 html에서 a태그로 들어오기 때문에 a태그를 이용해 선택하면 되겠다.

여기까지 완료 했다.