리액트 : 라우터

[참고 문헌 : Do it! 클론 코딩 영화 평점 웹서비스]

라우터

영화 평점 웹서비스에 내비게이션 기능을 추가 하기 위해 라우터를 사용한다. 라우터는 사용자가 입력한 URL을 통해 특정 컴포넌트를 불러주는 역할을 한다. 예를 들어 사용자가 'localhost:3000/home' 이라고 입력하면 Home컴포넌트를, 'localhost:3000/about' 이라고 입력하면 About 컴포넌트를 불러주는 것이다.
우선 라우터를 사용하기 위해 react-router-dom 패키지를 설치해야 하므로 터미널에 다음과 같은 명령어를 입력한다.

npm install react-router-dom

설치한 react-router-dom은 여러 종류의 라우터를 제공한다. 영화 평점 웹서비스에서는 HashRouter와 Route 컴포넌트를 사용한다.

App.js에서 HashRouter와 Route 컴포넌트를 임포트하고 HashRouter가 Route 컴포넌트를 감싸 반환하도록 App.js를 작성한다.

//App.js

import React from 'react';
import './App.css';
import { HashRouter, Route } from 'react-router-dom'; // HashRouter, Route 컴포넌트 임포트

function App(){
  return (
    <HashRouter>
      <Route/>
    </HashRouter>
  ); 
}

export default App;

이렇게 작성하게 되면 실행되는 기존 주소에 #/이 붙게 되는데 이는 HashRouter 때문이다.

이제 Route에 미리 작성해 놓은 Home 컴포넌트와 About 컴포넌트를 넣는다. Route에 전달할 속성은 URL을 위한 path 속성과 불러줄 컴포넌트를 입력하는 component 속성이 있다.

//App.js

import React from 'react';
import './App.css';
import { HashRouter, Route } from 'react-router-dom';
import About from './routes/About';
import Home from './routes/Home';

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

export default App;

이렇게 작성한 뒤 localhost:3000에 접속하면 주소 뒤에 /#/이 자동으로 붙으면서 Home컴포넌트가 출력된다. 그리고 주소 뒤에 about을 입력하면 About 컴포넌트가 출력되지만 Home 컴포넌트가 함께 출력된다. 이는 라우터가 URL을 찾는 방식 때문이다.

예를들어 사용자가 'localhost:3000/A/B' 에 접속하면 라우터는 /, /A, /A/B 순서로 path 속성이 있는지 찾게된다. 따라서 'localhost:3000/about' 에 접속하면 우리가 HashRouter속 Route에 작성한 path 두개를 라우터가 모두 찾기 때문에 두 컴포넌트가 모두 그려지는 것이다.이는 Route 컴포넌트에 exact 속성을 추가하면 해결할 수 있다.

//App.js

import React from 'react';
import './App.css';
import { HashRouter, Route } from 'react-router-dom';
import About from './routes/About';
import Home from './routes/Home';

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

export default App;

이렇게 exact={true}를 추가하면 path가 정확히 /인 경우에만 Home 컴포넌트만을 출력하도록 설정된것이다.

이제 내비게이션 컴포넌트를 새로 만들어서 HashRouter에 추가한다.

//Navigation.js

import React from 'react';
import {Link} from 'react-router-dom';
import './Navigation.css';

function Navigation(){
    return (
        <div className="nav">
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </div>
    );
}

export default Navigation;

react-router-dom의 Link 컴포넌트를 사용하지 않으면 Home, About 컴포넌트로 바뀔 때마다 페이지가 새로고침 된다. <Link to="">태그는 html의 <a href="">와 같다.

//App.js
  
import React from 'react';
import './App.css';
import { HashRouter, Route } from 'react-router-dom';
import About from './routes/About';
import Home from './routes/Home';
import Navigation from './components/Navigation';

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

export default App;

이렇게 App 컴포넌트에 Navigation 컴포넌트를 임포트하고 HashRouter 사이에 포함시키면 다음과 같이 내비게이션 기능을 사용할 수 있게 된다.