[React] 6. React Router

본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다.

 

React Router

React에서 페이지 이동시 사용하는 라이브러리

Route

"스크린" 단위로 생각 =  "route" 별로 생각

화면에 표시되는 하나의 Screen을 하나의 Route라 본다.

Router

router는 URL을 보고있는 component

Browser Router : URL이 평소 보는 URL이랑 똑같다.

Hash Router : localhost.com/#/movie붙인다.

Swtich

Route를 찾는 역할, 현재는 사용되지 않고 Routes로 대체되었다.

한번에 하나의 Route만을 렌더링하기 위해 사용

(원래 Router에서는 한번에 2개의 Route를 렌더링도 가능)

여기서 Route란 localhost.com/movies/123 <-이 부분을 말함

Routes

업데이트 이후 Switch 역할을 대신함.

한 번에 하나의 Route만을 렌더링하기 위해 사용 (원래 Router에서는 한번에 2개의 Route를 렌더링도 가능)

여기서 Route란 하나의 스크린을 말하고 URL상으로는  localhost.com/movies/123과 같이 구분된다.(path 속성)

 

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Detail from "./routes/Detail.js";
import Home from "./routes/Home.js";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/movie" element={<Detail />}></Route>
      </Routes>
    </Router>
  );
}

export default App;

 

Link

URL을 통해 하나의 Route에서 다른 Route로 이동할 때 사용하는 컴포넌트

html에서는 a태그의 역할이나 React에서는 a태그의 href를 사용하지 않는다.

 

a 태그는 전체 페이지가 reloading 되기 때문 -> React에서는 재실행 되는 것을 피하고 싶다 -> link 컴포넌트

 

import { Link } from "react-router-dom";
...
<Link to="/moive">{title}</Link>

 

페이지를 이동할 때 새로고침 되지 않는다.

Route의 props

Route에서 props를 사용하여 Route(페이지) 간에 정보를 전달할 수 있다.(일종의 POST 방식)

 

<Link
  to={{
    pathname: "/movie-detail",
    state: {
      year: year,
      title: title
    }
  }}
>{title}</Link>

 

state가 props로 전달된다. 이 외에도 다양한 속성이 있다.

그러나 route를 통해서 간 것이 아닌 주소를 직접 쳐서 가게 된다면 state가 undefined 될 수 있다.

이 경우 Home으로 redirect하는 방식으로 처리해주어야한다.

 

const {location, history} = this.props;
if(location.state == undefined){
	history.push("/"); //main
}

 

이를 위해서 props의 history 속성을 이용하는데 history 속성 내의 push를 통해 직접 주소를 치고 들어온 경우

홈화면으로 리다이렉팅 해줄 수 있다. 즉, 이를 이용해 유저의 네비게이션 방식을 바꿀 수 있다.

Route의 파라미터

Route의 props가 아닌 URL(GET 방식)을 통해서도 파라미터를 전달할 수 있다.

 

<Route path="/movie/:id" element={<Detail />}></Route>

 

id를 위한 자리, 여기 오는 값이 뭔지 알고 싶어요. (URL로부터 값을 가져오고 싶다.)

 

import {useParams} from "react-router-dom"

 

useParams 함수를 통해 id 부분의 파라미터를 받아올 수 있다.

import {A, C} from B vs import A from B

B = {one: '1', two: '2'}

import {one, two} from B //get attribute

import B from B //get entire object

 

B가 {one: '1', two: '2'} 라는 값을 가진 객체일 경우

import {one, two} from B를 통해 B 객체의 속성을 가져옴

import B from B는 B 객체 자체를 가져옴