#6. ROUTING

• 현재 만든 웹페이지에 인터랙션을 활성화시켜보자.

1) 네비게이션 바 기능을 한번 구현해보도록 하자. react-router-dom (네비게이션을 만들어주는 패키지) 을 사용해보도록 하자. 먼저 다음 명령어로 react-router-dom을 설치하자.

npm i react-router-dom

2) src에 components와 routes라는 이름의 폴더를 하나씩 만들자. 이후 Movie.css, Movie.js 파일을 components폴더로 옮겨주자.

 

3) routes폴더에는 Home.js와 About.js라는 파일을 만들어서 2개의 라우터를 생성하자. Home.js는 영화를 보여주는 페이지이고 About.js는 영화 하나에 대한 about페이지가 될 것이다. Home.js의 기능은 현재 우리가 App.js에 구현한 것과 일치하므로 App.js의 코드를 Home.js에 복붙하자. 이후 App.css도 Home.css라는 이름으로 바꾼 뒤 routes폴더에 넣어준다. Home.js에서 Movie와 App.css를 import하던 주소도 다음과 같이 변경해준다.

import Movie from '../components/Movie';
import "./Home.css";

4) 이제 App.js를 아예 새로운 용도의 component로 사용하도록 하자. 내부에 있는 모든 코드를 삭제하고 함수형 컴포넌트 App을 만들자.

<App.js>

import React from 'react';

function App(){
  return <span>something</span>;
}

export default App;

5) 라우터는 url을 가지고서 그 주소에 따라 실행을 함. 일단 다음과 같이 HashRouter와 Route를 import하고서 <HashRouter> 안에 두가지 props로 1.렌더링할 스크린과 2.무엇을 할지를 정해주는 props를 Route와 함께 작성한다.

 

...라고 할 뻔~

 

일단 2가지 변경사항이 있다.

1. 라우터 사용법에 있어서 Route태그는 Routes 태그로 감싸주어야만 하고,

2. component라는 prop은 element로 변경되었고 그 prop의 대상으로는 <About />와 같이 컴포넌트 형태로 작성해야 한다.

 

그러므로 다음과 같은 코드가 아니라

function App(){
  return (
    <HashRouter>
      <Route path="/about" component={About} />
    </HashRouter>
  );
}

다음처럼 작성해야 한다.

function App(){
  return (
    <HashRouter>
      <Routes>
        <Route path="/about" element={<About/>} />
      </Routes>
    </HashRouter>
  );
}

또한 다양한 컴포넌트들을 라우팅할 수 있는데 다음과 같을 때, 원래는 Home 라우트에 exact = {true}를 주어서 url주소에 해당 path와 정확히 동일할 때만 실행시키도록 제약을 줄 수 있는데 현재는 변경되어서 그런지 exact 요소를 주지 않아도 잘 실행된다.

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

6) 이번엔 네비게이션을 만들어 손쉬운 인터랙션을 구현해보자. component파일에 Navigation.js 라는 파일을 만들고 다음과 같이 코드를 구현해주자. 이후엔 App.js에서 Navigation을 사용해보자.(App.js에 <Navigation />을 작성할때 <...Router> 안쪽이면서 <Routes> 바깥쪽에 작성해야 한다. Routes의 children태그로는 <Route>나 <Route.Fragment>만 올 수 있기 때문.)

<Navigation.js>

import React from "react";

function Navigation(){
    return (
        <div>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </div>
    );
}

export default Navigation;

<App.js>

import React from 'react';
import { HashRouter, Routes, Route } 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="/" element={<Home/>} />
        <Route path="/about" element={<About/>} />
      </Routes>
    </HashRouter>
  );
}

export default App;

이렇게 구현했을 시 Navigation.js에서 사용한 a href는 HTML이기 때문에 React를 죽이고 페이지를 아예 모두 새로고침을 해버린다. 그래서 React에서 제공하는 Link를 사용해보자.

 

<Navigation.js>

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;

그리고 Navigation.css를 components에 만들고 다음과 같이 스타일을 적용해준다.

 

<Navigation.css>

.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;
}

7) 이번엔 About 컴포넌트의 궁극적인 만든 목적인 <클릭한 영화에 대한 상세 설명 안내>를 구현하기 위해 About에 props를 전달하고 그 props들을 가지고 상세 페이지를 보여줄 것이다.

라우터에 있는 모든 라우트들은 props를 갖는다.

Link의 to 안에는 여러 항목들이 있다. (pathname, search, hash, state) 

이 항목들을 이용해서 많은 것들을 정의할 수 있다.