14. React-Router-Dom

1. 개요

● 래익트 만든 홈페이지에서 url을 변경하여 페이지의 전환을 만들 수 있다. 페이지 전환에 따른 url은 변경되지만 페이지가 리랜더링 되지 않게 전환할 수 있다. 

 

● 라우팅이라는 것은 사용자가 어떤 주소(url)로 들어왔을 때 해당 주소에 적당한 페이지를 사용자에게 보여주는 것이다. 

 

 

 2. 사용법

● BrowserRouter란

react-router-dom을 적용하고 싶은 컴포넌트의 최상위 컴포넌트에 감싸주는 래퍼 컴포넌트이다. 

App에서 감싸주었다. 이렇게 하면 App이라고하는 컴포넌트 안에서는 BrowserRouter를 사용할 수 있는 상태가 된 것이다. 

 

 

● Route 

import Route from 'react-router-dom';

const App = () => {
	return (
        <>
    		<h1>제목</h1>
        	<Route path = "/"><Home /></Route>
        	<Route path = "/Login"><Login /></Route>
        	<Route path = "/Join"><Join /></Route>
	    </>	
	);

}

App이라는 컴포넌트는 BrowserRouter에 의해 감싸져잇고 App안에서는 Header라는 하나의 자식 컴포넌트만 존재하는 상황이다. Route를 사용하여 App 컴포넌트 아래의 적절한 자식 컴포넌트를 줄 것이다.  Route를 사용하기 위해서

import Route from 'react-router-dom'을 선언해준다. 

위 그림에서 Route 컴포넌트의 속성으로 path를 주고 그 안에 컴포넌트로 감싼다. 

이러면 url이 /이면 <home> 컴포넌트를, path가 Login이면 <Login> 컴포넌트를 App 아래의 자식으로 두게 된다. 

 

근데 여기까지 실행해보면 문제점이

path가 /일때는 /에 해당하는 home만 찍는다.

근데 path가 /Login일때는 /와 /Login 둘다 걸리게되어 Home과 Login 두 컴포넌트 모두 App의 자식 컴포넌트로 가지게 된다. 위 문제점을 해결하기 위해 아래 그림과 같이 한다. 

 

 

import Route from 'react-router-dom';

const App = () => {
	return (
        <>
    		<h1>제목</h1>
        	<Route exact path = "/"><Home /></Route>
        	<Route path = "/Login"><Login /></Route>
        	<Route path = "/Join"><Join /></Route>
	    </>	
	);

}

이렇게 하면 path가 /인 경우는 실행될려면 url이 정확히 / 이어야한다. 따라서 /Login일 떄 path=/ 는 더 이상 출력되지 않는다.

 

※ 만약 path가 같은 두 개의 컴포넌트가 있다면 해당 path에서는 두 컴포넌트 모두 출력된다. 

 

 

● Routes

import Route from 'react-router-dom';
import Routes from 'react-router-dom';

const App = () => {
	return (
        <>
    	   <h1>제목</h1>
           <Routes>
              <Route path = "/"><Home /></Route>
              <Route path = "/Login"><Login /></Route>
              <Route path = "/Join"><Join /></Route>
           </Routes>
        </>	
	);

}

 Route 컴포넌트 안에 exact를 쓰지 않고도 exact를 쓴 것과 같은 효과를 낼 수 있는 방법이 있다. Routes라는 컴포넌트로 감싸주는 것이다. 일단 아래 글을 보자. 

 

위 코드를 실행해서 path를 3가지 모두 줬을 때 모두 Home 컴포넌트만 출력한다. 그 이유는 Routes 안에서 path와 일치하는 첫 번째 컴포넌트가 발견되면 나머지 컴포넌트는 버리게 된다. 따라서 위 3가지 모든 컴포넌트는 exact가 없으면 path=/에 걸리게 되어 3가지 경우 모두 Home을 출력하는 것이다. 

 

 

○ Routes 왜 사용하냐? (활용해보자)

 <Routes>
      <Route exact path = "/"><Home /></Route>
      <Route path = "/Login"><Login /></Route>
      <Route path = "/Join"><Join /></Route>
      <Route path = "/">Not Found</Route>
 </Routes>

만약 Routes를 사용하지 않고 사용자가 이상한 path를 입력하면 그 path에 해당하는 처리를 일단 위 지식만 가지고는 못한다. Routes를 사용하여 위 그림과 같이 적으면, 일단 첫 path = /일 때는 exact를 적어주었기 때문에  /Login, /Join 를 입력시 Home에서 걸리지 않는다. 

만약 사용자가 이상한 path를 입력하면 해당 path는 맨마지막의 Not Found를 출력할 것이다. 

 

 

○ Routes의 문제점에 대한 해결책1

 <Routes>
      <Route path = "/Login"><Login /></Route>
      <Route path = "/Join"><Join /></Route>
      <Route path = "/"><Home /></Route>
 </Routes>

path=/에 걸리게 되어 3가지 경우 모두 Home을 출력하는 문제점을 해결하는 간단한 방법으로 path=/를 제일 마지막에 넣으면 된다.

 

 

● Link

import { Router, Link, Switch } from 'react-router-dom';

...
   <ul>
      <li><Link to ="/">Home</Link></li> 
      <li><Link to ="/Login">Home</Link></li>
      <li><Link to ="/Join">Home</Link></li>
   </ul>
   
    <Routes>
      <Route path = "/Login"><Login /></Route>
      <Route path = "/Join"><Join /></Route>
      <Route path = "/"><Home /></Route>
    </Routes>
...

리액트로 만드는 것은 Single page이다. Single page에서는 페이지가 리로딩 되지 않고 실제 동적으로 가져오는 데이터느 코딩으로 만들거나 ajax로 비동기적으로 끌고와 페이지를 만드는 것이 중요하다. 하지만 Link를 적용하기 전까지는 single page가 아니다!!! 페이지가 리로딩된다는 치명적 문제점이 있다. 

이 문제점을 해결 해주는 컴포넌트가 Link이다. 

Link는 원래는 a태그였다. a태그로 path를 변경하였는데 a태그 -> link 태그로 해주면 동작은 동일하다. path 변경이 일어나지만 페이지가 리랜더링되지 않는다.!

 

 

● HashRouter

리액트