REACT_Router 1.리액트 라우터 - 기본개요

Eunsu·2021년 11월 1일

@ React_Library

목록 보기

2/5

리액트 라우터에 대해서 공부를 해보려고 한다.
아 미친 확실히 월요일이긴 월요일 인가 봄. 겁나피곤함
하지만 나는 지치지 않을꺼임...

리액트 라우터가 필요한 이유, 동작원리,api

history, location, match 객체

예제 만들기

React-Router

1. 리액트 라우터란?

🔹 등장배경

리액트는 SPA구조이다. index.html 의 div 엘리먼트 하나만 두고, 자바스크립트 모든 부분을 동적으로 렌더링하는 구조를 취한다.

사실 별도의 라이브러리 없이 state만으로 라우팅을 구현할 수 있다. ( onClick event로) 다음코드처험 현재 어떤 컴포넌트로 랜더링 되어야 하는지 상태로 관리할 수 있다.

import { useState } from "react";
import Home from "./components/Home";
import Profile from "./components/Profile";
import SubPage from "./components/SubPage";
import "./styles.css";
export default function App() {
  const [cate, setCate] = useState(Home);
  return (
    <div className="App">
      <header>
        <button onClick={() => setCate(Home)}>Home</button>
        <button onClick={() => setCate(SubPage)}>SUb</button>
        <button onClick={() => setCate(Profile)}>Profile</button>
      </header>
      <main>{(children = cate)}</main>
    </div>
  );
}

하지만 이렇게 될 경우 문제점이 몇가지 발생한다.

새로고침하면 Home으로 무조건 되돌아가게 됨.(state 초기화)

고유의 url path가 없어 즐겨찾기를 할 수 없음.

뒤로가기 버튼을 누르면 이전 페이지가 아닌 그 전에 머물던 웹사이트로 이동함.

이러한 문제들 때문에 react-router 를 사용하게 됨.

🔸리액트 라우터란?

React-Router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라서 선택된 데이터를 하나의 페이지에서 랜더링해주는 라이브러리 이다.

2. 리액트 라우터 컴포넌트 (Apis)

✔ 라우터 핵심 컴포넌트

Link 컴포넌트

html 에서 <a /> 태그와 유사한 기능을 하는 컴포넌트. to = '' 로 이동할 경로를 지정해줌.

Route 컴포넌트

<Route> 컴포넌트는 현재 주소창의 경로와 매치될 경우 보여줄 컴포넌트를 지정하는데 사용된다. path prop을 통해서 매치시킬 경로를 지정하고 component prop을 통해서 매치되었을 때 보여줄 컴포넌트를 할당한다.

Router 컴포넌트

<Router /> 컴포넌트는 <Route /> 컴포넌트와 <Link /> 컴포넌트가 유기적으로 동작하도록 묶어주는데 사용함.
<Route>와 <Link> 컴포넌트는 DOM 트리 상에서 항상 를 공통 상위 컴포넌트로 가져야한다.
=> HashRouter, BrowserRouter, StaticRouter, MemoryRouter

💞 라우터 핵심컴포넌트 TEST

//index.js
import ReactDOM from "react-dom";
import {  BrowserRouter } from "react-router-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
 <BrowserRouter>
    <App />
  </BrowserRouter>,
  rootElement
);

//App.js
export default function App() {
  return (
    <div className="App">
      <header>
        <Link to="/">Home</Link>
        <Link to="/sub">SUb Page</Link>
        <Link to="/profile">Profile</Link>
      </header>
      <main>
        <Route path="/" exact component={Home} />
        <Route path="/sub" component={SubPage} />
        <Route path="/profile" component={Profile} />
      </main>
    </div>
  );
}

//Router.js (컴포넌트로 빼기)
import React from "react";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";
import Home from "./Home";
import Profile from "./Profile";
import SubPage from "./SubPage";
export default () => {
  return (
    <Router>
      <header>
        <Link to="/">Home</Link>
        <Link to="/sub">SUb Page</Link>
        <Link to="/profile">Profile</Link>
      </header>
      <Route path="/" exact component={Home} />
      <Route path="/sub" component={SubPage} />
      <Route path="/profile" component={Profile} />
    </Router>
  );
};

✔ 라우터 그 외 컴포넌트

switch 컴포넌트

Switch는 Route 중 하나가 매칭되면 다른 항목은 신경쓰지 않고 리턴

      <Switch>
        <Route path="/" exact component={Home} /> //리턴
        <Route path="/sub" component={SubPage} /> //리턴
        <Route path="/" component={Profile} /> //프로필 리턴
      </Switch>

=> link profile 클릭하면 /profile -> '/' path는 Home 하나만 리턴됨. -> '/' , '/sub' 이 아닌 모든 url profile 리턴

Not a Found 반환

      <Switch>
        <Route path="/" exact component={Home} /> 
        <Route path="/sub" component={SubPage} /> 
        <Route path="/" render={()=><div>Not A Found</div>} /> 
      </Switch>

Redirect 컴포넌트

상위에서 라우터, 스위치를 설정해 놓으면 링크나 리다이렉트를 사용해 자유로운 페이지 이동이 가능

      <Switch>
        <Route path="/" exact component={Home} /> 
        <Route path="/sub" component={SubPage} /> 
        <Redirect from = '*' to ='/'/> 
      </Switch>