TIL

---

1) react-router-dom

리액트에서 라우팅 기능을 사용하려면 터미널 창에 다음의 커맨드를 입력하면 된다.

npm i --save react-router-dom

라우터에는 보통 <BrowserRouter> 가 많이 사용되며 <Route> 와 <Link> 를 통해 라우팅을 구현할 수 있다.

예를 들어 홈, 프로필, 게시판 페이지를 만들고 싶다고 가정했을 때 이것을 라우팅으로 다음과 같이 구현할 수 있다.

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home.js";
import Profile from "./Profile.js";
import Board from "./Board.js";

const AppRouter = () => {
  return (
    <Router>
      <Route path="/">
        <Home />
      </Route>
      <Route path="/profile">
        <Profile />
      </Route>
      <Route path="/board">
        <Board />
      </Route>
    </Router>
  )
}

<Router> 태그로 먼저 감싸고 <Route> 태그를 통해 해당 컴포넌트가 보여질 URL 을 path 속성을 통해 지정할 수 있다.

하지만 위의 문제점은 홈페이지에 접속했을 때 "/" 경로로 접속되지만, 나머지 "/profile" 과 "/board" 또한 "/" 를 포함하고 있으므로 위 3개의 컴포넌트가 모두 렌더링이 된다는 것이다.

이를 해결하기 위해서는 명확한 경로를 지정해야 한다.

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home.js";
import Profile from "./Profile.js";
import Board from "./Board.js";

const AppRouter = () => {
  return (
    <Router>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/profile">
        <Profile />
      </Route>
      <Route path="/board">
        <Board />
      </Route>
    </Router>
  )
}

exact path 속성을 통해 정확! 하게 내가 지정한 URL 에 접근했을 때만 라우팅 기능이 일어나게 할 수 있다.

위에서는 문제를 일으키는 공통된 URL이 "/" 이므로 해당 URL 에 exact path 속성을 부여했다.

만약 유저가 내가 지정한 URL 로 이동할 수 없는 경우 다음과 같이 path 값이 없는 <Route> 를 이용하면 해결이 가능하다.

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home.js";
import Profile from "./Profile.js";
import Board from "./Board.js";
import ErrorPage from "./ErrorPage.js";

const AppRouter = () => {
  return (
    <Router>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/profile">
        <Profile />
      </Route>
      <Route path="/board">
        <Board />
      </Route>
      {/*변경된 부분*/}
      <Route>
        <ErrorPage />
      </Route>
    </Router>
  )
}

하지만 위 코드의 문제점은 에러가 발생하지 않아도 다른 URL 에 접속했을 때 무조건 같이 렌더링 된다는 것이다.

리액트 라우터가 path 값이 없으므로 무조건적으로 렌더링 시키기 때문이다.

이때 <Switch> 를 사용하면 이를 해결할 수 있다.

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home.js";
import Profile from "./Profile.js";
import Board from "./Board.js";
import ErrorPage from "./ErrorPage.js";

const AppRouter = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/profile">
          <Profile />
        </Route>
        <Route path="/board">
          <Board />
        </Route>
        <Route>
          <ErrorPage />
        </Route>
      </Switch>
    </Router>
  )
}

Switch 의 특징은 첫번째로 매칭되는 path 를 가진 컴포넌트를 렌더링 시킨다는 것과 path와 매칭되는 <Route> 가 없을 때에 맨 밑의 default <Route>의 실행이 보장 된다는 것이다.

이를 통해 만약 유저가 특정 URL 에 접속할 수 없을 때 제일 처음 매칭되는 ErrorPage 를 실행하게 된다.