[React] react-router-dom 사용법

책 "리액트를 다루는 기술" 학습 중
아직 리액트에 익숙하지 않아서인지 앞 내용을 보면 뒷 내용을 까먹고.. 뒷 내용을 보면 앞 내용을 까먹고..
똑같은 실수를 하지않길 바라며 '미래의 나'에게 이 글을 바친다.

라우터 적용 순서

프로젝트 생성 및 리액트 라우터 적용 -> 페이지 만들기 -> Route 컴포넌트로 특정 주소에 컴포넌트 연결 -> 라우트 이동하기

먼저, react-router-dom 라이브러리 설치

yarn add react-router-dom

프로젝트에 라우터 적용

• index.js

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

ReactDOM.render(
	<BrowserRouter>
    	<App />
	</BrowserRouter>
)

BrowserRouter 컴포넌트는 react-router-dom 내장 컴포넌트로 HTML5의 History API를 사용하여 페이지 새로고침 없이 주소변경, props 내려주기를 할 수 있도록 한다. MDN history api 공식문서

Route로 컴포넌트 경로 설정하기

• Home.js

import React from "react";

const Home = () => {
  return (
    <div style={style}>
      <h1>Home</h1>
    </div>
  );
};

export default Home;

• About.js

import React from "react";

const About = () => {
  return (
    <div style={style}>
      <h1>About</h1>
    </div>
  );
};

export default About;

• App.js

App.js에서 Home, About 페이지의 Route를 설정한다.
Home라우트에 exact를 붙이지 않으면 /가 붙은 모든 컴포넌트가 랜더링된다. 즉, 정확히 path에 해당하는 경로의 컴포넌트로 이동하기 위해서이다.

import React from "react";
import { Route } from "react-router-dom";
import { Home, About, Todos } from "./pages/Wrap";

function App() {
  return (
    <div className="App">
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}

export default App;

Link태그로 해당 라우터 경로로 이동

import React from "react";
import { Route } from "react-router-dom";
import { Home, About, Todos } from "./pages/Wrap";

function App() {
  return (
    <div className="App">
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      <ul>
    
    
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}

export default App;

위처럼 기초적인 라우터 기능으로도 기본적인 기능 구현은 가능하다.
하지만, URL파라미터, 서브 라우터 등 추가적인 라우터 기능은 공부 후 다시 작성하기로..!

[github] react-router 를 참고해보자 !