React- react router 프로젝트 준비 및 기본적인 사용법

※ 강의를 듣고 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

설치

npm install react-router-dom

 

 

프로젝트에 라우터 적용

라우터 적용은 index.js 에서 BrowserRouter 라는 컴포넌트를 사용하여 구현하면 된다.

 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'; // BrowserRouter 불러오기
import './index.css';
import App from './App';

// App 을 BrowserRouter 로 감싸기
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

 

 

페이지 만들기

이제 라우트로 사용 할 페이지 컴포넌트를 만든다.

웹사이트에 가장 처음 들어왔을 때 보여줄 Home 컴포넌트와 웹사이트의 소개를 보여주는 About 페이지를 만들어보겠다.

 

src/Home.js

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>홈</h1>
      <p>이곳은 홈이에요. 가장 먼저 보여지는 페이지죠.</p>
    </div>
  );
};

export default Home;

 

 

src/About.js

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>소개</h1>
      <p>이 프로젝트는 리액트 라우터 기초를 실습해보는 예제 프로젝트랍니다.</p>
    </div>
  );
};

export default About;

 

Route: 특정 주소에 컴포넌트 연결하기

사용자가 요청하는 주소에 따라 다른 컴포넌트를 보여주는 작업을 할 때에는 Route 라는 컴포넌트를 사용한다.

사용 방식은 다음과 같다.

<Route path="주소규칙" component={보여주고싶은 컴포넌트}>

 

src/App.js

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

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

export default App;

여기까지 하고 한번 yarn start 를 하여 개발서버를 시작해보면

 

이렇게 / 경로로 들어가면 홈 컴포넌트가 뜨고,

 

/about 경로로 들어가면 예상과 다르게 두 컴포넌트가 모두 보여진다.

는 /about 경로가 / 규칙과도 일치하기 때문에 발생한 현상인데 이를 고치기 위해선 Home 을 위한 라우트에 exact 라는 props 를 true 로 설정하면 된다.

 

src/App.js

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

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

export default App;

이렇게 하면 경로가 완벽히 똑같을때만 컴포넌트를 보여주게 되어 이슈가 해결 된다.

 

Link: 누르면 다른 주소로 이동시키기

링크를 거는 방법은 <Link> 컴포넌트를 사용하면 된다.

사용 방식은 다음과 같다.

<Link to="경로">...</Link>

 

src/App.js

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

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

export default App;

 

실행 결과