<리액트 기초> 리액트 라우터

 

* 리액트 라우터 도입

 - 리액트 라우터는 하나의 웹사이트에서 마치 여러개의 웹사이트를 이동하는 경험을 제공해준다.

 

 - 리액트 라우터를 사용하기 위해서는 먼저 터미널에서 설치를 해야한다.

npm i react-router
npm i react-router-dom

 

 - 실제로 쓰는 건 React-Router-DOM이다. 리액트라우터 돔이 리액트라우터의 일부를 꺼내어 활용한다.

 

* 리액트 라우터 사용

 - 기존과 같이 Client.jsx에서 index.html의 root태그에 돔으로 접근하도록 하고, 별도의 Games.jsx 컴포넌트 파일을 만들었다. 여기에 지난 시간까지 만든 게임들의 링크를 넣어서 이동하도록 할 것이다.

 

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
import NumberBaseball from '../숫자야구/NumberBaseball';
import RSP from '../가위바위보/RSP';
import Lotto from '../로또/Lotto';

const Games = () => {

  return (
    <BrowserRouter>      
    
      <div>
        <Route path="/number-baseball" component={NumberBaseball} />
        <Route path="/rock-scissors-paper" component={RSP} />
        <Route path="/lotto-generator" component={Lotto} />
      </div>
    </BrowserRouter>
    
  );
};


export default Games;

 

 - 리액트 라우터 돔에서 BrowserRouter와 Route를 불러온다. 라우터는 주로 BrowserRouter 또는 HashRouter을 이용한다.

 

 - 최상단 태그를 BrowserRouter로 작성하고 Route에 페이지로 만들고 싶은 것들을 작성한다. 이 때 컴포넌트로 import된 클래스 컴포넌트들을 가져온다.

 

 - 이제 만들어낸 페이지로 이동할 링크가 필요하다. 그러나 a태그로 이동하게되면 오류가 발생한다. 왜냐하면 여기서 만든 주소는 실제로 존재하지 않는 가상의 주소이기 때문이다. 따라서 Link를 불러와서 사용한다. 이는 라우트를 불러와주는 역할을 한다.

 

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom'
import NumberBaseball from '../숫자야구/NumberBaseball';
import RSP from '../가위바위보/RSP';
import Lotto from '../로또/Lotto';

const Games = () => {

  return (
    <BrowserRouter>    
      <div>
        <Link to="/number-baseball">숫자야구</Link>
        &nbsp;
        <Link to="/rock-scissors-paper">가위바위보</Link>
        &nbsp;
        <Link to="/lotto-generator">번호생성기</Link>
      </div>
    
      <div>
        <Route path="/number-baseball" component={NumberBaseball} />
        <Route path="/rock-scissors-paper" component={RSP} />
        <Route path="/lotto-generator" component={Lotto} />
      </div>
    </BrowserRouter>
    
  );
};


export default Games;

 

 - 위와 같이 Link를 이용하여 to로 주소를 나타내면 브라우저 상에서는 a태그로 나타난다.

 

 - 클릭하면 주소창의 주소가 바뀌어가면서 컴포넌트들을 보여주게 된다.

 

 - 그러나 한 사이트이다. 여러 페이지가 아니므로 주소가 바뀌었을 때 새로고침을 하거나, 그 주소를 입력하면 에러가 출력된다.

 

 - 요약하자면 라우트가 있는 부분은 계속 바뀌는 부분이고, 윗부분은 공통의 레이아웃이다.

 

* HashRouter

 - 위의 코드에서 BrowserRouter대신 HashRouter을 작성하여도 동일하게 작동한다. 그러나 주소 중간에 #(해시)가 들어가게 된다. (ex. localhost:8080/#/numer-baseball)

 

 - 해시라우터는 새로고침을 하여도 에러가 나지 않는다. 이렇게 작동하는 이유는 서버사이드에서 해시 뒷부분을 인식하지 못하기 때문이다.

 

 - 서버사이드가 알지 못하는 정보는 SEO에서 불이익을 받을 수 있으므로 실무에서는 권장하지 않는다.

 

 - 만약 SEO를 위해서 BrowserRouter을 사용한다면 새로고침에서 나타나는 오류를 위해서 서버사이드에 세팅이 필요하다.

 

 

 

---

 

 

 

참고

 

 

 이 글은 ZeroCho 님의 리액트 무료 강좌를 수강하며 개인적으로 정리하며 쓰는 글입니다.

 

 

 

 

인프런

웹 게임을 만들며 배우는 React - 인프런

 

유튜브

리액트 무료 강좌(웹게임)