8. 영화 앱에 여러 기능 추가하기

화면 이동을 시켜주는 장치인 라우터를 설치해보자.

 

---

Home은 영화 앱 화면으로 이동시켜주고, About은 개발자 자기 소개 화면으로 이동시켜준다.

components 폴더에 Movie 컴포넌트 옮기고 routes 폴더에 라우터가 보여줄 화면을 만든다.

 

먼저 Home 부터 꾸며보자.

 

<Home.css>

.container {
  height: 100%;
  display: flex;
  justify-content: center;
}

.loader {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 300;
}

.movies {
  display: grid;
  grid-template-columns: repeat(2, minmax(400px, 1fr));
  grid-gap: 100px;
  padding: 50px;
  width: 80%;
  padding-top: 70px;
}

@media sreenn and (max-width: 1090px) {
  .movies {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

 

브라우저 폭에 맞게 영화 카드가 1줄 또는 2줄로 출력된다.

 

<실행화면>

 

이제 App.js가 2개의 라우터(Home.js, About.js)를 보여줄 주 있도록 만들면 된다.

---

<라우터 만들어 보기>

 

 App.js를 수정해서 라우터를 만들어보자.

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

HashRouter와 Route 컴포넌트를 사용할 거다.

 

<App.js>

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

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

export default App;

<About.js>

import React from "react";
import "./About.css";

function About() {
  return (
    <div className="about__container">
      <span>
        "Freedom is the 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.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;
}

---

<실행결과>

---

이제 네이게이션을 만들어보자.

 

components 폴더에 Navigation.js 파일을 만들고 2개의 Link 컴포넌트를 반환하도록 JSX를 작성.

 

 

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

.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: #273c75;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  font-weight: 600;
}

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

 

<실행결과>

---

 

 

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.