React Router (책 : 07~08)

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기

 

1. VSC 의 TERMINAL에 npm install react-router-dom 을 입력합니다.

 

2. 다운로드를 한 다음 코드를 Router별(스크린 별)로 나눠야 합니다.

(ex: 1개 Router은 홈페이지 등...)

 

3. App.js에 React-route를 위한 import 합니다.

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

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

1-1. BrowserRouter : 일반 url처럼 뒤에 /하고 입력합니다. ex) https://naver.com/

1-2. HashRouter : 일반 url뒤에 /#/가 붙습니다.              ex) https://naver.com/#/

2. Switch : Route를 찾는 역할. (Route는 url 경로입니다. ex: https://naver.com/movie )

3. Link : 새로고침없이 원하는 경로로 이동할 수 있는 역할

- Route를 만든 다음에 Home이 보여지도록 수정할 것 입니다.

 

 

Route에는 2가지를 전달할 수 있습니다.

1. URL을 위한 path props

2. URL에 맞는 컴포넌트를 불러주는 components props

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" components={About} />
    </HashRouter>
  );
}

- About이라는 컴포넌트를 import 합니다.

- path에는 /about을, components에는 About을 줍니다. 그래서 About 컴포넌트를 불러오도록 만들었습니다.

 

 

라우터가 제대로 작동하는지 테스트하겠습니다.

- localhost:3000/# 에 path에 지정했던 /about을 입력하면 About 컴포넌트가 불러지면서 내용이 출력됩니다.

 

 

이제는 Home 컴포넌트도 불러지도록 수정해봅시다.

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="/about" components={About} />
      <Route path="/" components={Home} />
    </HashRouter>
  );
}

- path에 "/"를 준 이유는, 기본으로 처음에 보여줄 페이지를 Home 컴포넌트로 하기 위해서 입니다.

 

 

URL에 /about이 있어도 Home 컴포넌트가 같이 보여지는 이유

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="/home">
        <h2>Home</h2>
      </Route>
      <Route path="/home/component">
        <h2>Home is very good.</h2>
      </Route>
      <Route path="/about">
        <h2>About</h2>
      </Route>
    </HashRouter>
  );
}

/home

/home/component

 

/home/component를 입력했는데 /home의 내용이 같이 출력되었습니다.

- 라우터가 /home/component에 접속하면 라우터는 / → /home → /home/component 순으로 확인합니다.

(이때 순서는 코드 순서와 관계 없습니다.)

- 이때 path에 /home, /home/component 둘 다 있으므로 이 2개가 같이 출력된 것입니다.

 

그러므로 라우터가 / → /about 으로 확인하기 때문에 About, Home이 같이 출력된 것 입니다.

 

 

Route 컴포넌트에 exact props를 추가해서 위와 같은 현상을 해결합니다.

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="/about" components={About} />
      <Route path="/" exact={true} components={Home} />
    </HashRouter>
  );
}

- exact={true} 의미 : 해당 path가 정확히 "/"일 때만 Home 컴포넌트 출력합니다.

 

---

 

Navigation으로 Home과 About으로 이동하기

import React from "react";

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

export default Navigation;

- 이것을 App.js에 import 합니다.

import React from "react";
import "./App.css";
import { HashRouter, 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 />
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
    </HashRouter>
  );
}

export default App;

 

 

Navigation을 눌렀을 때 화면이 새로고침 됩니다.

- a 태그의 특징이기도 한데 이러면 필요한 부분만 가져오는 React의 장점을 활용하기 어렵습니다.

- 이 문제를 해결하기 위해선 react-router-dom의 Link를 사용합니다.

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

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

export default Navigation;

- 이때 꼭 기억할 것은 Link, Route 컴포넌트는 반드시 HashRouter 안에 포함되어야 합니다.

 

 

Navigation.css를 작성합니다.

- Link 컴포넌트에 스타일을 주고 싶을 때 a 를 사용합니다.

- :not(selector) 의미 : 해당 selector을 제외한 다른 것에 스타일을 줍니다. (selector에는 :last-child, 클래스 이름 등)

 

---

 

route props

- 라우팅 대상이 되는 컴포넌트에 기본으로 넘겨주는 기본 props 입니다.

- 직접 넘겨주지 않아도 기본으로 넘어가는 것입니다.

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

function About(props) {
  console.log(props);
}

export default About;

- 이것으로 About.js에 이런 props가 자동으로 전달되는 것을 확인했습니다.

 

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={{ pathname: "/about", state: { fromNavigation: true } }}>
        About
      </Link>
    </div>
  );
}

export default Navigation;

- pathname은 URL을 의미하고, state는 route props에 전달할 데이터를 의미합니다.

 

아무것도 전달 안했을 때

전달했을 때

 

 

Movie.js에 Link를 넣어서 영화 상세 정보를 볼 수 있도록 만들기.

- Detail.js를 만들어서 해당 props를 받을 수 있도록 합니다.

- 그러기 위해서 App.js에 Detail.js를 import해서 전처럼 만듭니다.

- 하지만 해당 영화를 클릭해야만 props가 Detail.js로 넘어가기 때문에 그렇게 하지 않아도 값이 넘어가도록

  리다이렉트 기능을 사용합니다.

 

 

리다이렉트 기능 구현하기.

- history에 URL과 관련된 함수들이 들어있습니다.

- 그 중, push 함수를 사용해서 URL을 전달합니다.

- 그러기 위해서 Detail.js 컴포넌트를 클래스형 컴포넌트로 만들어서 componentDidMount() 생명주기 함수를 사용해서 Detial.js가 마운트되면 push 함수가 실행되어서 값을 전달해줍니다.

- 직접 URL을 입력했을 때 location의 state값이 비어있을 때만 활성화되고 이때 Home으로 이동하게 합니다.

 

 

영화 상세 정보 표시하기

- 이렇게 전달받은 props를 location으로 주고, location.state.title 로 값을 출력합니다.

(props는 따로 선언하지 않아도 됩니다.)

- 생명주기 함수에서 순서를 보면 render() → componentDidMount() 순서이므로 만약 location.state.title에 값이 없으면

  오류가 발생합니다.

- 따라서 componentDidMount()에서 작성한 것을 render()에도 작성해야 합니다.

☆ location.state가 null이라면 render() 함수를 끝내고, componentDidMount()를 실행해서 Home로 이동.