React-Router.1

리액트-라우터(React-Router)란?

리액트는 SPA(Single Page Application) 방식으로 여러 개의 페이지를 이용해 페이지간 이동 개념이 아닌, 하나의 페이지 안에서 상황에 따라 필요 데이터만을 load 해주는 형태를 가진다.
이 때, URL 의 값에 따른 View Page 를 load 해서 보여주는 기능을 리액트-라우터(React-Router)가 담당한다.

각각 페이지마다 다른 HTML 파일을 보여주는 것이 아니라 HTML 내부의 내용을 수정해서 다른페이지처럼 보이게 하는것

1.리액트 라우터 세팅

react-router-dom을 설치합니다.

터미널에 react-router-dom 설치
1. yarn add react-router-dom
2. npm install react-router-dom

설치 후 index.js 파일에 라우트 세팅을 합니다.

(index.js)
import { BrowserRouter } from 'react-router-dom'; //여기 import 합니다.

ReactDOM.render(
  <React.StrictMode>  
    <BrowserRouter> // 브라우저라우터 태그로 앱태그를 감쌉니다.
      <App/>
    </BrowserRouter> //
  </React.StrictMode>
  document.getElementById('root')
);

2.라우팅 방법(페이지 이동)

우선 페이지를 이동하려면 react-router-dom의 여러 태그를 import합니다.

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

Route태그

라우팅 할 곳에 <Route>태그를 작성하고 안에 이동할 경로(path)와 path 방문시 보여줄 HTML을 작성하면 됩니다.

(app.js)
import { Link, Route, Switch } from 'react-router-dom';

function App(){
  return (
    <div> 
      <Route path="/">    
        <div>메인페이지</div>
      </Route>			  
      <Route path="/detail">
        <div>상세페이지</div>
      </Route>
    </div>
  )
}

exact라는 속성을 이용하면 경로와 정확이 일치한 페이지만 보여준다.

<Route exact path="/"> 
  <div>메인페이지</div> 
</Route> 

Switch태그

Switch는 첫번째로 매칭되는 path 를 가진 컴포넌트를 렌더링 시킨다. 이것이 exact path 와 다른 점은 첫번째 매칭만 본다

(app.js)
import { Link, Route, Switch } from 'react-router-dom';

function App(){
  return (
    <div>
      <Switch>
        <Route path="/">    
          <div>메인페이지</div>
        </Route>			  
        <Route path="/detail">
          <div>상세페이지</div>
        </Route>
      </Switch>  
    </div>
  )
}

Link태그

(app.js)
import { Link, Route, Switch } from 'react-router-dom';

function App(){
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/detail">Detail</Link> 
    </div>
  )
}

Link태그는 to속성을 이용해서 경로이동이 가능하다.
a태그와 유사하다.