react-router-dom (1)

1. 라이브러리 설치

npm add react-router-dom

 

 

 

 

2. 프로젝트에 라우터 적용

index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용 

 

BrowserRouter

- 컴포넌트

- HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고,

현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다.

 

 

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

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


reportWebVitals();

 

 

 

 

 

3. 페이지 만들기

라우트로 사용할 페이지 컴포넌트들

//Home.js

import React from "react";

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <p>Home.js, the first page</p>
    </div>
  );
};

export default Home;

//About.js

import React from "react";

const About = () => {
  return (
    <div>
      <h1>About</h1>
      <p>This project is to practice react-router</p>
    </div>
  );
};

export default About;

 

 

 

 

4. Route 컴포넌트로 특정 주소에 컴포넌트 연결

- 사용자의 현재 경로에 따라 다른 컴포넌트 보여주기

- 예시

<Route path="주소규칙" component={보여 줄 컴포넌트} />

 

//App.js

import React from "react";
import { Route } from "react-router-dom";
import Home from "./component/Home";
import About from "./component/About";

import "./App.css";

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

 

 

출력 화면

 

잘 작동하는 것 같아 보이지만..

 

localhost:3000/about 경로를 입력해서 들어가 보면

About component만 나올 줄 알았는데..

Home component도 같이 렌더링 되었다...

 

/about 경로가 / 규칙에도 일치하기 때문

 

-> Home을 위한 Route 컴포넌트에 exact라는 props를 넣어주고 값은 true로 설정

 

<div>
      <Route path="/" component={Home} exact={true} />
      <Route path="/about" component={About} />
</div>

 

 

이제 About component만 잘 등장!

 

 

 

 

5. Link 컴포넌트를 사용하여 다른 주소로 이동하기

 

- 기존에는 a 태그를 사용해서 페이지를 전환했는데,

리액트 라우터를 사용할 때는 a 태그를 직접 쓰면 안된다고 한다.

a 태그는 페이지를 전환하는 과정에서, 페이지를 새로 불러온다.

그래서 애플리케이션이 들고 있던 상태들을 모두 날려버린다.

이미 렌더링된 컴포넌트들도 다 사라지고 다시 처음부터 렌더링...ㄷㄷ

 

 

 

- Link 컴포넌트 : 클릭하면 다른 주소로 이동시켜 주는 컴포넌트

Link 컴포넌트 자체는 a 태그로 이루어져 있다고 한다.

그런데 페이지 전환을 방지하는 기능이 내장 되어 있다.

그래서 Link 컴포넌트를 이용해서 페이지를 전환하면, 페이지를 새로 불러오지 않는다. 

애플리케이션을 그대로 유지한 상태에서 HTML5 History API를 사용해서 페이지 주소만 변경해준다.

 

 

예시

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

<Link to="주소">내용</Link>

 

//App.js


import React from "react";
import { Route, Link } from "react-router-dom";
import Home from "./component/Home";
import About from "./component/About";

import "./App.css";

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">HOME</Link>
        </li>
        <li>
          <Link to="/about">ABOUT</Link>
        </li>
      </ul>
      <hr />
      <Route path="/" component={Home} exact={true} />
      <Route path="/about" component={About} />
    </div>
  );
};
export default App;

 

 

 

 

 

 

 

 

출처: 김민준, 리액트를 다루는 기술 개정판, 2019년, 327~332 페이지