React에 대해 공부하기5-Router (2차스터디)

 

오늘은 Router기능에 대해 정리해보려고 한다.

2차 스터디(개인 페이지 만들기)에도 사용하려고, 눈여겨봤던 기능이다.

Router란?

 

Router라는 개념은 네트워크 상에서 통신 데이터를 보낼 경로를 선택하는 과정이다. SPA환경의 웹 애플리케이션에서는 말 그대로 요청에 따라 알맞은 페이지를 변환해 주는 과정으로 이해하면 된다.

SPA의 단일 페이지라는 이점을 살려, MPA(Multi Page Application) 환경과는 달리 페이지자체를 반환하지 않고 데이터만 불러와 렌더링 해주기 때문에 사용자 입장에서 훨씬 빠르다고 느낄 수 있다. 또한 클라이언트에서 렌더링을 다루기 때문에 CSR(Client Side Rendering)이라고도 불린다.

 

React Router 설치하기

React Router 공식페이지에 설명돼있는 거를 참조하여 설치하자면

npm install react-router-dom@6

이런 식으로 명령어를 입력하면 6 버전이 설치된다.

참고로 5 버전과 6 버전의 차이는 아래에 설명하겠다.

 

React Router 사용방법

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './pages/Header';
import Home from './pages/Home';
import Profile from './pages/Profile';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

 

이런 식으로 가장 최상단에는 

{ BrowserRouter, Routes, Route }를 import 해주고,

기본 사용방법은 

<BrowserRouter>를 최상위 태그에 감싸주면 되는 형식이다.

*여기서 BrowserRouter는 브라우저 History API를 사용해 현재 위치의 URL을 저장해 주는 역할이다.

 

Router랑 같이 나오는 개념으로 link to가 있는데
이것은 페이지를 갱신하지 않고 렌더링 방식으로 이동하려면 link to 구문을 사용하면 된다.

import { Link } from 'react-router-dom';

function Nav() {
  return (
    <div>
      <Link to={'/'}>Home</Link>
      <Link to={'/board'}>Board</Link>
      <Link to={'/profile'}>Profile</Link>
    </div>
  );
}

export default Nav;

이런 식으로 말이다.

cf. 5 ver VS 6 ver

본래 SPA(싱글페이지앱) 구현의 핵심은 Router안에 Switch안에 Route였다.
이제는 Router 안에 Routes 안에 Route로 사용한다

또한 컴포넌트 샌드위치 구조, component props 대신 element props를 사용한다

구문으로 예를 들자면

 

//ver5

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Portfolio />
        </Route>
        <Route path="/login">
          <LoginForm />
        </Route>
        <Route path="/register" component={Register} />
      </Switch>
    </Router>
  );
}

이런 식으로 샌드위치 구조였다면,

v6에서는

//v6


import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Portfolio />} />
        <Route path="/login" element={<LoginForm />} />
        <Route path="/register" element={<RegisterForm />} />
      </Routes>
    </Router>
  );
}

 

이런 식으로 Router 안에 Routes 안에 Route로 사용한다.

 

정리를 하긴 했지만, (이해는 얼추 됐다) 근데 막상 사용하려고 vsc를 켜면 백지가 될꺼같다.

이곳에 정리해 뒀으니 짬짬이 보러 오면서 상기시켜야 할 거 같다!

 

 

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

 

 #엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript