react-router-dom

라우팅(Routing)이란?

• 네트워크에서 최적의 경로를 찾는 과정을 라우팅(Routing)이라고 정의한다.
• 하지만, 웹에서는 다른 주소에 따라 다른 화면을 보여주는 과정을 라우팅이라고 한다.
• 루트(Route)는 길, 경로라는 뜻, 라우터(Router)는 길을 뚫어주는 역할을 한다.
• 즉 라우터는 어떤 페이지 혹은 컴포넌트로 이동하기 위한 경로를 만들어주는 역할을 한다.
• 웹에서는 어떤 path(길)를 통해 다른 웹 화면을 보여주는 과정이라고 이해하면 된다.
  → Route 에서 사용되는 속성.

react-router-dom

• 리액트에 내장되어 있지 않은 라우터 기능을 사용 할 수 있게 해주는 라이브러리.

설치하기

• 해당 컴포넌트를 사용하기 위해서는 먼저 라이브러리를 설치하고, 문서에 불러오는 과정이 필요하다.
• 먼저 npm을 이용하여 react-router-dom 을 프로젝트에 설치한다.

npm install react-router-dom

• 설치 후 사용하고자 하는 문서에서 import 를 이용하여 사용하고자 하는 컴포넌트를 불러와야 한다.

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

// 비구조화 할당으로 사용한다.

사용방법

• react-router-dom 는 크게 3가지의 컴포넌트로 나눌 수 있다.

BrowserRouter

• 라우터의 역할을 하며, 라우터가 사용 될 구역을 묶어주는 역할을 한다.

const App () => {    //화면에 표시 될 컴포넌트
  return (
    <BrowserRouter>
      {// 라우팅할 컴포넌트}
      {// 라우팅할 컴포넌트}
      {// 라우팅할 컴포넌트}
    </BrowserRouter>
  )
}

Route, Switch

• 컴포넌트로 이동할 수 있는 경로(path) 를 설정한다.
• 여기서 지정된 주소가 컴포넌트의 주소가 된다.
  → www.somesite.com/b 라고 하면 /b라는 path 를 가진 컴포넌트를 렌더링한다.
• Switch 는 주소가 일치하는 컴포넌트를 단 1개만 렌더링 하게끔 한다.
  → 만약 Switch 가 없는 경우 주소가 중복되는 컴포넌트가 있다면, 동시에 렌더링한다
• Route 는 지정된 path 를 순서대로 확인하여 이동하고자 하는 path에 포함되는 지를 판단하여 렌더링한다.

// Switch 미사용

<Route exact path="/">  {//주소지정}
  <AComp />  {//컴포넌트 불러오기}
</Route>
<Route path="/b">
  <BComp />
</Route>

// B컴포넌트의 주소로 이동하면 / 와 /B 가 동시에 만족되기 때문에, 
// 2개의 컴포넌트가 렌더링됨

• / 가 /b 에 포함되어 있으므로, 동시에 만족하는 것으로 판단한다.
• 만약 /b/link 라는 path 가 있다면 /, /b, /link 를 모두 만족하므로, Switch가 없다면 3개의 컴포넌트가 렌더링된다.

// Switch 사용

<Switch>
  <Route exact path="/">
    <AComp />
  </Route>
  <Route path="/b">
    <BComp />
  </Route>
</Switch>

// B컴포넌트의 주소로 이동하면 / 와 /b 가 동시에 만족되지만,
// Switch에 의해 B컴포넌트만 렌더링됨
// exact 속성에 의해 정확하지 않으면 AComp 가 렌더링 되지 않기 때문.

• 위에서 이야기한 Route 의 특징 때문에 첫 페이지의 path가 / 인 경우, 다른 path를 사용해도, 최초에 렌더링 된 path="/" 를 가진 컴포넌트만 렌더링되는 경우가 있다.
  → 정확히는 주소는 변경되지만, path 가 / 인 컴포넌트 만 보인다.
• 이럴 때는 정확하게 일치하는 경우에만 렌더링 하라는 뜻인 exact 를 함께 사용하여 해당 문제를 해결한다.
  → 물리적으로 가장 나중에 작성하는 방법도 있다.

// "/b" 의 경우

<Switch>
  <Route path="/"><AComp /></Route>  {// "/"가 포함되니 렌더링}
  <Route path="/b"><BComp /></Route> {// "/b"와 일치하니 렌더링 후 탐색종료}
  <Route path="/c"><CComp /></Route> {// 탐색 안됨}
</Switch>

// 먼저 탐색 된 AComp 만 렌더링된다.

// "/b" 의 경우

<Switch>
  <Route path="/b"><BComp /></Route> {// "/b"와 일치하니 렌더링 후 탐색종료}
  <Route path="/c"><CComp /></Route> {// 탐색 안됨}
  <Route path="/"><AComp /></Route>  {// 탐색 안됨}
</Switch>

Link

• 요소가 클릭되었을때, 렌더링 할 컴포넌트를 연결시킨다.
• HTML 로 컴파일되는 과정에서 a 태그로 변경된다.

<Link to="/b">
  <Button>To B Component</Button>
</Link>

// 버튼을 누르면 /b 라는 path 를 가진 B 컴포넌트를 렌더링한다.

적용

import {BrowserRouter, Link, Switch, Route} from "react-router-dom"
{// 사용하고자 하는 컴포넌트를 불러온다.}

const App () => {   {// 화면에 표시 될 컴포넌트}
  return (
  <div> {// react 규칙에 따라 하나의 태그로 묶는다.}
    <Link to="/b">
      <Button>To B Component</Button> 
      {// 버튼을 누르면 path가 /b 인 컴포넌트를 렌더링한다. }
    </Link>

    <BrowserRouter>
    {// 라우팅 기능을 사용할 구역을 묶는다.}
      <Switch>
        <Route exact path="/">  
        {// 주소의 path가 /와 정확히 일치하면 Acomp 를 렌더링한다.}
          <AComp />
        </Route>
        <Route path="/b">  
        {// 주소의 path가 /b 면 Bcomp 를 렌더링한다.}
          <BComp />
        </Route>
      </Switch>
    </BrowserRouter>
  </div>
  )
}

---

+

• 보통 첫 페이지의 path 는 / 로 사용하는데, 주소창에서 / 는 생략되므로, 사이트 주소만 작성하고 들어가는 경우의 path 는 / 라고 볼 수 있다.
  → https://www.google.com = https://www.google.com/
• Route 는 단어의 뜻 자체로 경로라는 뜻이므로, 경로를 지정하는 것이고,
  라우팅은 경로를 지정하여 이동할 수 있게 하는 것이라고 생각하면 될 것 같다.