라우터 만들어 보기

라우터는 사용자가 입력한 URL을 통해 특정 컴포넌트를 불러줍니다.

 

HashRouter와 Route 컴포넌트 사용하기

HashRouter와 Route 컴포넌트를 임포트한 다음, HashRouter 컴포넌트가 Route 컴포넌트를 감싸 반환하도록 App.js를 수정해봅시다.

import React from "react";
import "./App.css";
import { HashRouter, Route } from "react-router-dom";

function App() {
  return (
    <HashRouter>
      <Route />
    </HashRouter>
  );
}

export default App;

 

앱이 실행되는 주소에 #/을 붙을 것입니다. 이건 HashRouter 때문입니다.

Route에는 2가지 props를 전달할 수 있는데 하나는 URL을 하기 위한 path props이고, 하나의 URL에 맞는 컴포넌트를 불러 주기 위한 component props입니다.

 

Route 컴포넌트에 path, component props 추가하기

About 컴포넌트에 path, component props에 URL과 About 컴포넌트를 전달합시다.

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

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

export default App;

 

About.js 수정하기

import React from "react";

function About() {
  return <span>About this page: I built it because I love movies.</span>;
}

export default About;

 

HashRouter에 Route를 넣었고, Route가 About 컴포넌트를 불러오도록 만들었습니다.

 

 

라우터 테스트해 보기

localhost:3000/#에 path props로 지정했던 값 /about을 붙여서 다시 접속해 봅시다.

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

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

export default App;

 

URL은 localhost:3000/#/about이고, About 컴포넌트에 작성했던 내용이 있습니다. Route 컴포넌트에 전달할 path props를 보고 component props에 지정한 Aboout 컴포넌트를 그려준 것입니다.

 

Home 컴포넌트를 위한 Route 컴포넌트 추가하기

App 컴포넌트에 Home 컴포넌트를 임포트하고, 또 다른 Route 컴포넌트를 추가합시다.

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";

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

export default App;

 

path props를 "/"으로 입력한 이유는 localhost:3000에 접속하면 기본으로 보여줄 컴포넌트가 Home 컴포넌트라서 그럽니다.

 

Route 컴포넌트에 exact props 추가해 보기

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";

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

export default App;

 

 

 

이제는 /about에 접속하면 About 컴포넌트만 출력될 것입니다.push props가 정확히 /인 경우에만 Home 컴포넌트만 출력되도록 설정되었습니다.

 

About.css 작성하기

.about__container {
  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);
  padding: 20px;
  border-radius: 5px;
  background-color: white;
  margin: 0 auto;
  margin-top: 100px;
  width: 100%;
  max-width: 400px;
  font-weight: 300;
}

.about__container span:first-child {
  font-size: 20px;
}
.about__container span:last-child {
  display: block;
  margin-top: 10px;
}

 

import React from "react";

function About() {
  return (
    <div className="about__container">
      <span>
        "Freedom is th freedom to say that two plus two make four. If that is
        granted, all else follows."
      </span>
      <span>--George Orwell, 1984</span>
    </div>
  );
}

export default About;

 

 

/about으로 접속하면 위와 같은 화면이 나타날 것입니다.