[React]4주차 스터디- react-router-dom

react-router란?

가장 많이 사용되는 라이브러리 중 하나로, 클라이언트 사이드에서 이루어지는 라우팅을 간단하게 해주며 서버 사이드 렌더링을 도와주는 도구들을 제공합니다. react-router은 웹과 앱, react-router-native은 앱에 사용 가능합니다. 오늘 다루는 react-router-dom은 웹에서 사용합니다.

react-router-dom 사용하기

터미널에 npm install react-router-dom 명령어를 입력하여 설치가 완료되면 react-router-dom으로부터 BrowserRouter, Route, Switch를 import 합니다.

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

• BrowserRouter: URL과 UI를 동기화하는 라우터입니다.
• Route: 컴포넌트 속성에 설정된 url과 현재 경로가 일치하면 해당하는 컴포넌트나 함수를 렌더링합니다.
• Switch: 자식 컴포넌트 route 또는 Redirect 중 매치되는 첫 번째 요소를 렌더링합니다. BrowserRouter만 사용할 때와의 차이점은 하나의 매칭되는 요소만 렌더링한다는 것입니다. 사용하지 않을 경우엔 매칭되는 모든 요소를 렌더링합니다.

라우트 설정

Route 컴포넌트를 사용하여 path 값으로 경로를 설정합니다.

//App.js
import React from 'react';
import ShowPage from './a';
import Hello from './hello';
import {BrowserRouter, Route, Switch} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
    <Switch>
      <Route exact path="/">
        <Hello/>
      </Route>
      <Route path="/a">
        <ShowPage/>
      </Route>
    </Switch>

    </BrowserRouter>

  );
}

export default App;

첫 번째 라우트 / 는 Hello 라는 컴포넌트를, 두번째 /a 는 ShowPage 컴포넌트를 보여주게 합니다.

첫 번째 라우트에는 exact가 붙어있는데, 주어진 경로와 정확히 맞아 떨어져야만 설정한 컴포넌트를 보여줘야 할 때 사용합니다. /a에도 / 문자열이 들어가기때문에, 이렇게 중첩될 수도 있는 라우트는 exact로 설정해야합니다.

 

Link 컴포넌트를 사용하여 라우터 이동

react-router-dom에서 import 한 Link를 사용하여 두 파일 간 이동할 수 있는 링크를 추가합니다. 'a' 태그와 비슷한 Link 는, to 속성에 설정된 링크로 이동합니다. 이 컴포넌트에 전달되는 props들은 컴포넌트 내부의 DOM에도 전달되므로, 일반 DOM 엘리먼트에 설정하듯이 className, style, onClick등의 이벤트를 전달할 수 있습니다.

<a>태그와의 차이점

<a href>의 형식을 사용하면 페이지가 새로고침되기때문에 Link를 사용합니다. 이 컴포넌트를 사용하면 페이지를 새로 불러오는걸 막고, 원하는 라우트로 화면 전환을 해줍니다. 

//Hello.js
import React from 'react';
import { Link } from 'react-router-dom';

export default function Hello() {
    return (
        <div> 
            <p>This is Comp 1 page</p>
            <Link to="/a">link to /a</Link>

        </div> 
    )
}

//a.js
import React from 'react';
import { Link } from 'react-router-dom';

export default function ShowPage() {
    return (
        <div>
            <p>This is Comp 2 Page</p>
            <Link to="/">link to /</Link>
        </div>
    )

}

link to /a를 클릭하면 Link to로 지정한 경로로 라우트를 변경합니다. 

 

마찬가지로 link to /를 클릭하면 지정한 경로로 라우트를 변경합니다. 

 

참고 자료

React JS #10 라우터 구현 react-router-dom - 초보자를 위한 리액트 강좌

react-router :: 1장. 리액트 라우터 사용해보기