react3일차 라우터??

위범석·2022년 7월 15일

라우팅(페이지 나누기)

여러가지 페이지를 만들고 싶다면 라우터를 이용합니다.

react-router-dom이라는 공식 라이브러리를 설치해서 이용하시면 됩니다.

오늘은 메인페이지와 상세페이지 이렇게 두개의 페이지만 만들어볼겁니다.

일단 설치와 셋팅부터 하도록 합시다.

설치/셋팅부터 합시다

터미널을 여시고

npm install react-router-dom@5.2.0
yarn add react-router-dom@5.2.0
둘 중 하나 입력해서 설치해주시면 됩니다. yarn 으로 시작하는건 당연히 저번에 yarn을 설치해야 사용할 수 있습니다.

그리고 index.js 파일에 방문합니다.

이 파일은 App.js에 있는 컴포넌트를 index.html에 꽂아주세요~ 뭐 이런 작업을 시키는 파일이라고 보시면 됩니다.

근데 여기다가 다음 코드들을 추가합니다.

import 어쩌구 많은곳;

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

ReactDOM.render(
<React.StrictMode>

</React.StrictMode>
document.getElementById('root')
);
▲ 당연히 다 지우고 복붙하는게 아니라 기존코드와의 차이점만 잘 복붙하시길 바랍니다.

BrowserRouter를 import 해오고 라는 태그를 추가했습니다.

그럼 이제 라우팅할 준비가 끝났습니다.

근데 셋팅할 때 말고 라는 태그도 이용할 수 있습니다.

사용방법은 위의 복붙했던 코드를 Browser라는 단어대신 전부 Hash라고 바꿔주시면 되는데

이게 뭐냐면

HashRouter를 복붙하시면 사이트 방문시 URL 맨 뒤에 /#/이 붙은채로 시작합니다.
BrowserRouter를 복붙하시면 사이트 방문시 # 그런거 없이 깔끔해집니다.

이게 차이점입니다.

Q. URL이 #기호로 드러워지는 HashRouter를 왜쓰죠?

A. 원래는 브라우저 주소창에 뭔가 페이지를 입력하면 서버에게 특정 페이지좀 보여달라는 요청이 됩니다.

근데 우리는 요청할 서버가 없고 그냥 리액트가 라우팅을 담당하고 있습니다.

그래서 잘못하면 있지도 않은 페이지를 서버에 요청을 해서 404 Page Not Found 이런 에러도 뜨고 그럴 수 있습니다.

실수로 서버에게 요청하지 않게 하려면 안전하게 #을 붙여주어야합니다.

왜냐면 브라우저 주소창에서 # 뒤에 붙은 것들은 절대 서버로 요청되지 않으니까요.

Q. 그럼 BrowserRouter는 안좋은거네요?

A. 그건 아니고 BrowserRouter를 쓰시려면 그냥 서버에서 셋팅만 잘해주시면 됩니다.

"이런 경로로 들어오는 요청은 404 보내지 말구요~ 전부 리액트가 라우팅하게 해주세요~"

"이 경로로 들어오는 요청은 그냥 리액트 메인페이지로 보내주세요~"

이런 식으로 API를 짜놓으면 됩니다. 물론 서버지식이 없다면 이건 몰라도됩니다.

라우팅을 해봅시다 (페이지나누기)

오늘의 목표는 이겁니다.

(1) / 여기로 접속하면 메인페이지를 보여주고 싶습니다.

(2) /detail로 접속하면 상세페이지를 보여주고 싶습니다.

근데 이런거 하려면 일단 하는 법부터 알아봅시다.

라우팅하려면 1. 여러가지 태그들 import가 필요합니다.

(App.js)

import 많은 곳;
import { Link, Route, Switch } from 'react-router-dom';

function App(){
return (

<div>
  HTML 잔뜩있는 곳 

</div>

)
}
▲ 상단에 Route 라는 태그를 import 해오십시오. Link, Switch는 다음시간에 쓸거라 미리 해놨습니다.

라우팅하려면 2. 원하는 곳에 태그를 작성합니다.

라우팅하려면 3. 안에 path와 path 방문시 보여줄 HTML 을 적으시면 됩니다.

(App.js)

import 많은 곳;
import { Link, Route, Switch } from 'react-router-dom';

function App(){
return (

<div>
  HTML 잔뜩있는 곳 
  <Route path="/"> 
    <div>메인페이지인데요</div>
  </Route>
  <Route path="/detail">
    <div>상세페이지인데요</div>
  </Route>
</div>

)
}
▲ 그래서 이렇게 적었습니다.

이제 브라우저 주소창에 입력해보십시오.

/ 으로 접속하면 "메인페이지인데요~"

/detail로 접속하면 "상세페이지인데요~" 가 보입니다.

라우팅쉽습니다. 이게 끝입니다.

이제 "메인페이지인데요~" 라는 div박스말고 메인페이지에 해당하는 HTML을 전부 담고 하시면 멋진 사이트가 완성되겠군요.

참고로 이렇게도 작성가능합니다.

그러면 /어쩌구 라는 경로로 접속했을 때 Card 라는 컴포넌트를 이 자리에 보여줍니다.

그러니 컴포넌트를 가지고 있으면 조금 더 간단하겠죠?

물론 이렇게 쓰는것도 똑같은 기능을 합니다. (더 쉬움)

React-Router 특징 :

각각 페이지마다 다른 HTML 파일을 보여주는게 아닙니다.

HTML 내부의 내용을 갈아치워서 다른 페이지처럼 흉내내는 것일 뿐입니다.

나는 /detail로 접속했는데 왜 상세페이지, 메인페이지 둘다 보여주죠?

왜냐면 /detail이라고 적으면 /라는 경로도 포함되어있으니까요.

그래서 / 경로로 접속했다고 생각하고 메인페이지

/detail 경로도 접속했다고 생각하고 상세페이지 둘다 보여주는 것입니다.

(그냥 리액트 라우터는 원래 이렇게 동작합니다)

그런게 싫으시면 / 경로에 exact라는 속성을 부여해주시면 됩니다.

메인페이지에요

그럼 / 경로와 정확히 일치할 때만 메인페이지를 보여줍니다.

메인페이지/상세페이지 Route 에 내용 채우기

지금은 / 경로 Route에선 "메인페이지에요~" 라는 임시 글자만 보여주고 있는데

여기에 진짜로 메인페이지에 해당하는 HTML들을 옮겨보도록 합시다.

은 모든페이지에 보여야하니 그대로 냅두고,

이랑 카드3개 레이아웃을 메인페이지 Route에 잘라내기 붙여넣기 하시면 되겠군요.

(App.js)

import 많은 곳;
import { Link, Route, Switch } from 'react-router-dom';

function App(){
return (

<div>
  <Navbar></Navbar> (상단메뉴 레이아웃)
  
  <Route path="/"> 
    <Jumbotron></Jumbotron> (Jumbotron 대문 레이아웃)
    <>상품3개 카드 레이아웃</>
  </Route>

  <Route path="/detail">
    <div>상세페이지인데요</div>
  </Route>
</div>