[React] 리액트 라우터 - 1 -

P1ush·2021년 5월 3일

React

목록 보기

7/10

리액트에서 라우터 기능을 사용해보았습니다.

라우터에 대한 정의는 아래 문서를 참고하세요.

리액트 라우터란?

리액트 라우터 설치

yarn add react-router-dom

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

index.js에 BrowserRouter를 불러옵니다.

BrowserRouter : HTML5의 History API 를 사용하여 페이지를 새로고침하지 않고도 주소를 변경할 수 있도록 해줍니다.

이동할 페이지 만들기

first.js

import React from 'react';

const first = () => {
    return (
        <div>
            <h1>첫 페이지</h1>
            <p>가장 먼저 보여지는 페이지입니다.</p>
        </div>
    );
};

export default first;

about.js

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>소개</h1>
      <p>리액트 라우터 사용해보기.</p>
    </div>
  );
};

export default About;

컴포넌트 연결하기

App.js

import React from 'react';
import { Route } from 'react-router-dom';
import About from './About';
import Home from './first';

const App = () => {
  return (
    <div>
      <Route path="/" component={first} />
      <Route path="/about" component={About} />
    </div>
  );
};

export default App;

App.js에서 경로를 연결한대로 결과가 보여집니다. "/" 경로로 들어가면 first.js 컴포넌트가 뜨고,

localhost:3000/about 경로로 들어가면 about.js가 나타나게됩니다.

Link로 연결하기

App.js

import React from 'react';
import { Route , Link } from 'react-router-dom';
import first from './first';
import about from './about';
import './App.css';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">FIRST</Link>
        </li>
        <li>
          <Link to="/about">SECOND</Link>
        </li>
      </ul>
      <hr/>
        <Route path="/" exact={true} component={first} />
        <Route path="/about" component={about} />
    </div>
  );
};

export default App;

Link와 a태그의 차이점?

<a> 태그는 페이지를 아예 새로 불러오게되고, 렌더링된 컴포넌트도 전부 새로 불러오지만,
<Link> 는 클릭 시 다른 주소로 이동시킵니다. Histroy API 를 사용하기 때문에 주소만 바꿀뿐 페이지를 새로 불러오지는 않습니다.

만약에 a태그를 써야된다면, e.preventdefault() 를 같이 쓰면 됩니다.

exact={true} : path가 /일 경우, / 뿐만 아니라 /로 시작하는 모든 URL 경로, 사실 상 가능한 모든 경우의 수의 경로와 매치가 되버림. 그래서 exact prop 이 없으면, 의도치 않게 first 컴포넌트가 URL 경로와 상관없이 항상 보여지게 됨. 하지만 exact prop 을 붙여주면 URL 경로 값이 <Route>의 path 값과 완벽히 전체가 일치해야 매치되는 것으로 처리가 됨.