[React] React란? - 라우터

목차

---

1. React란?
2. React-router-dom란?
   • 리액트 라우터 (React Router)
   • 경로 탐색자 (Route Matchers)
   • 내비게이션 (Navigation)
3. 왜 라우터를 쓰는가?
4. 라우터 사용 방법
5. BrowserRouter 란 뭘까?
6. Router 사용 예시
7. Redirect
8. Switch

 

 

1. React란?

---

React는 자바스크립트 라이브러리로써  SPA(Single Page Application)의 UI(User Interface)를 생성하는 라이브러리이다. 

 

 

2. React-router-dom

---

• 리액트의 SPA (Single Page Application) 방식으로, 여러 개의 페이지를 새로운 페이지로 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 불러와 렌더링 하여 보여준다.
• react-router-dom의 주요 컴포넌트의 3가지:
  1. 리액트 라우터 (React Router)
  2. 경로 탐색자 (Route Matchers)
  3. 내비게이션 (Navigation)

 

리액트 라우터 (React Router)

---

서로 다른 컴포넌트들의 주소에 따라 컴포넌트의 배치를 변경하는 작업을 라우팅(Routing)이라고 한다. React는 자체적으로 Router 기능이 포함이 되어 있지 않아 외부 모듈인 React Router을 사용한다. 

 

 

경로 탐색자 (Route Matchers)

---

• 경로 탐색자는 경로에 따라 다른 컴포넌트를 렌더링 한다.

<Switch>
    <Route path="/about">
        <About />
    </Route>
    <Route exact path="/project">
        <Project />
    </Route>
</Switch>

• <Switch> 컴포넌트는 라우팅 할 경로를 관리하며 하위 <Route>들의 path 속성을 검사한 뒤, URL과 일치하는 <Route>에 속한 컴포넌트를 렌더링 한다.

 

 

내비게이션 (Navigation)

---

• 내비게이션은 <a> 태그처럼 링크를 이동하게 하는 역할을 해준다.

<Router>
  <div>
    <Link to="/about">about 페이지로 이동</Link>
    <Link to="/home">home 페이지로 </Link>
  </div>
</Router>

• <link> 컴포넌트는 to라는 속성을 통해 이동할 경로를 지정한다는 점은 <a> 태그와 비슷하지만 실제로 해당 링크로 이동하는 대신 <Route>에 지정된 컴포넌트를 렌더링 한다는 점이 다르다.

 

 

3. 왜 라우터를 쓰는가?

---

•  <a href = "">는 <a> 태그를 통해 다른 페이지로 이동하면 서버에 완전히 새로운 페이지를 요청하게 된다. 그 결과로 브라우저는 새로고침을 수행함과 동시에 현재 컴포넌트가 갖고 있던 모든 상태 값을 읽게 된다.

 

 

4.   라우터 사용 방법

---

• 리액트가 공식적으로 지원하는 라우터 기능이 없기 때문에 라이브러리를 설치해야 한다.
• $ npm install react-router-dom을 설치함으로써 react-router-dom 사용이 가능해진다. 
• import { BrowserRouter as Router, Route } from 'react-router-dom';

 

 

5. BrowserRouter 란 뭘까?

---

• 라우터는 라우팅을 진행할 컴포넌트들을 감싸는 컴포넌트로 <BrowserRouter> 또는 <HashRouter>를 사용해 주로 루트 컴포넌트를 감싼다.
• HTML5의 History API를 사용하여 페이지를 새로고침 하지 않고도 주소를 변경할 수 있도록 해준다.(즉, 페이지 변경으로 인한 깜빡거림이 없다.)
• 현재 주소에 관련된 정보를 props로 조회 및 사용이 가능하도록 만들어준다.

 

 

6. Router 사용 예시

---

• Route는 Router 안에서만 써야 한다.
• <Route path='/'>는 <Users /> 사이트가 http://localhost:3000 또는 http://localhost:3000/nothing 한마디로 “/”뒤에 어떤 게 와도 User사이트가 켜진다.
• 그 이유는 path=’/’가 ‘/’로만 시작되면 Users를 랜더 한다. 하지만 우리가 원하는 것은 이게 아니다. 우리는 Users가 “/”일 때만 Users가 랜더 되기를 원한다.

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
 
import Users from './user/pages/Users';
 
const App = () => {
  return (
    <Router>
      <Route path='/'>
        <Users />
      </Route>
    </Router>
  );
};
 
export default App;

• “/”에만 Users가 랜더 되게 하기 위해 Route에 exact를 써준다.

<Route path="/" exact>

• 이제 “/” 뒤에 다른 게 써지면 Users가 랜더 되지 않는다.

 

 

7. Redirect

---

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
 
import Users from './user/pages/Users';
 
const App = () => {
  return (
    <Router>
      <Route path='/' exact>
        <Users />
      </Route>
      <Redirect to='/' />
    </Router>
  );
};
 
export default App;

• Redirect를 설정해줌으로써 “/”뒤에 지정되지 않은 주소가 적힌다면 <Redirect to='/' /> 여기로 이동치 켜주는 역할을 한다.

 

 

8. Switch

---

• <Route path='/places/new' exact>를 설정해준다고 http://localhost:3000/places/new를 갔을 때 NewPlace로 이동하지 않는다. <Redirect to='/' /> 여기로 이동한다.
• 그 이유는... 위에서 밑으로 route를 읽으면서 마지막인 <Redirect to='/' /> 여기에서 “/”뒤에 어떤 게 붙든 메인으로 돌아간다.
• 이 문제를 해결하기 위해서는 switch를 사용해야 한다.
  • Siwtch를 import 하고
  • Route 밖에 Switch 태그를 사용한다.
• 이제 /places/new가 가능해진다.

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Redirect,
  Switch,
} from 'react-router-dom';
 
import Users from './user/pages/Users';
import NewPlace from './user/pages/NewPlace';
 
const App = () => {
  return (
    <Router>
      <Switch>
        <Route path='/' exact>
          <Users />
        </Route>
        <Route path='/places/new' exact>
          <NewPlace />
        </Route>
        <Redirect to='/' />
      </Switch>
    </Router>
  );
};
 
export default App;