[React] 페이지 나누기 (라우팅)

방법

react-router-dom 라이브러리를 이용한다.

 

터미널에 yarn add react-router-dom명령을 입력한다.

 

초기세팅

1. index.js에 다음과 같이 입력한다.

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

.이 없이 그냥 적으면 보통은 라이브러리 이름을 의미한다.

 

2. BrowserRouter로 App을 감싼다.

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

 

BrowserRouter VS HashRouter

주소창은 서버에게 요청하는 곳이고, /abc로 이동해달라고 하면 리액트가 프론트 단에서 알아서 해준다.

- HashRouter는 #이 추가된다.

라우팅을 좀더 안전하게 할 수 있다. (서버로 전달하지 않는다) 라우팅은 리액트가 알아서 잘 할 수 있다.

- BrowserRouter는 #이 없다.

라우팅을 리액트가 아니라 서버에게 요청할 수도 있어서 위험하다. (서버가 "그런페이지 없는데..?" 할 수 있다) 따라서 서버에서 서버라우팅을 방지하는 API를 작성해둬야한다. (서버개발자한테 물어보면된다)

 

Route를 만들기 (페이지를 나누기!)

기획을 잘해야한다.

1. App.js에서 import를 해야한다.

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

2. <Route path="/경로"></Route>

3. <Route> 안에 HTML 적기

<Route path="/">
     <div>메인화면</div>
</Route>

만약에 HTML이 아니라 깔끔하게 컴포넌트를 보여주고 싶다면? component 속성을 추가한다.

<Route path="/example" component={Modal} ></Route>

라우터는 매칭되는 것을 다 보여준다.

/와 /detail 이랬을 경우 둘 다 보여준다.

exact를 적으면 정확히 그것일 때만 보여준다.

<Route exact path="/">
     <div>메인화면</div>
</Route>

 

React Router 특징

- 페이지마다 다른 HTML 파일이 아니다. SPA이다.

url을 이용해서 갈아치워주며, 페이지 이동을 흉내내준다.

 

컴포넌트로 파일을 분리해서 export한 후 import하여 쓸 때! 

- 컴포넌트 역할 파일명은 대문자로 쓴다.

- 상단에 import React, {useState} from 'react'; 를 써줘야한다.

 

페이지 이동하는 버튼만들기

<Link to="경로">버튼</Link>

 

페이지 뒤로가기 버튼만들기 :  useHistory라는 훅을 사용한다.

버튼을 만들 페이지에 다음을 import해온다.

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

컴포넌트 안에서 history object를 만든다. (방문기록을 저장해놓는 object)

let history = useHistory();

return (
	<button onClick={() => {history.goBack();}}>뒤로가기</button>
)

 

history객체의 goBack() 함수를 사용한다.

특정 경로로 이동시키려면

history.push('/특정경로명');

 

<Route path="/:id">
</Route>

/:id는 /모든문자 경로를 의미한다.

 

Switch 컴포넌트

여러개가 동일하고 비슷한 주소더라도 하나만 보여주세요!

모든 라우트를 감싼다. switch는 택1과 동일. 중복을 허용하지 않겠다. 중복발생시 맨 위의 것 사용한다.

 

중요데이터는 App에서 관리하고, props로 전달한다

중요한 데이터는 App 컴포넌트에 보관한다. 혹은 redux 파일에 보관한다.

 

화면을 분리했는데 각각에 맞는 상세화면을 보여주고 싶다면? 파라미터문법을 사용한다.

ex) /detail/0에 들어가면 0번째 상품 상세화면을 보여주고 싶다면?

네이버 블로그도 글번호가 조금씩 달라진다.

App.js에서 라우팅할 때 /detail/:id로 입력한다.

:id => 뒤에 아무 문자가 와도 이 페이지로 이동시켜주세요. (URL 작명법, 파라미터문법) 

1. :뒤에 마음대로 작명

2. 여러개 사용가능하다

 

분리된 컴포넌트에서 useParams 훅을 import 해온다.

import { useHistory, useParams } from 'react-router-dom';

 

그리고 컴포넌트 함수 안에서 object 자료형인 파라미터를 destructuring 해준다. (params는 여러개 쓸 수 있기 때문!)

let { id } = useParams();