[React.js/Side Lib.] React-Router

미니 프로젝트에서 네비게이션 메뉴에 React-Router를 적용해서 페이지를 변경해보았다. 범용적인 라이브러리기에 기술 포스팅을 하였다.

---

🧑‍💻 Routing

- SPA(Single Page Application)

 

React-Router 에 대해 공부하기 전에, 그 사용목적에 대해 얘기하려면 SPA 방식의 학습이 선행되어야 한다.

SPA는 말 그대로, 페이지가 1개인 어플리케이션을 의미한다. 여기에서 페이지라 함은 HTML 파일을 의미한다.

 

그래서, 리액트같은 라이브러리(혹은 프레임워크)가 브라우저에서 뷰 렌더링을 담당하게 하고, 필요한 데이터만 전달받아 표현하게 된다.

기존의 MPA 와 가장 큰 차이는, 각 주소가 HTML 페이지가 아닌 JS파일(컴포넌트)을 불러와서 뷰를 수정하는 'Routing' 방식으로 구현된다.

클라이언트 사이드에서, 한 페이지 내 Routing을 용이하게끔 돕는 Third-Party Library 이다. 범용적이며 React-native 에서도 사용됨.  

 

cf) MPA(Multi Page Application)

 

이전의 웹 어플리케이션 구조는 여러 개의 페이지(HTML)로 구성되고, 유저가 요청할 때마다 새로고침되며 이동시마다 서버에서 리소스를 받아 해석하고 리렌더링하는 과정을 거쳐야 했다. HTML 파일 혹은 템플릿 엔진 등을 사용해서 어플리케이션 뷰 방식도 서버에서 담당했다.

- Routing

다른 경로(주소)에 따라 다른 View(화면)을 보여주는 기능을 의미한다. React는 React-Router 라는 Third-party Library가 많이 쓰임.

---

🧑‍💻 React-Router

 

- 설치(npm)

npm install react-router-dom --save

* --save 하는 이유는, dependencies 에 올라가기 때문에 package.json 버전관리에 필수적이다.

 

- 적용

 

* 상위 컴포넌트(index.js)

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// import pages
import Home from "./pages/Home";
import About from "./pages/About";
import SingleCocktail from "./pages/SingleCocktail";
import Error from "./pages/Error";
// import components
import Navbar from "./components/Navbar";
function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/cocktail/:id">
          <SingleCocktail />
        </Route>
        <Route path="*">
          <Error />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

1. 'react-router-dom' 에서 필요한 기능들을 import 한다. (BrowswerRouter 를 Router 축약, Route 두 개 기능이 주로 쓰임)
2. 상위 컴포넌트의 return 태그를 <Router />로 설정한다. 내부에 공통적인 컴포넌트들을 포함하는게 유리하겠다. (<Navbar />)
3. 여기서는 <Switch> 기능도 사용했다. <Route> 의 path 주소에 따라 표현되는 컴포넌트 페이지들이 다르다.
4. <Route exact={true}> props는 path의 정확성을 의미한다. 정확히 '/' 주소로만 들어가지는 것이다.(/가 포함된 다른 url과 중첩방지)
5. :id 는 url의 변수로 사용 가능하다. 해당 페이지 컴포넌트에서, useParams() 를 통해 해당 변수명을 설정할 수 있다.

// SingleCocktail.js

const { id } = useParams();

 

* 하위 컴포넌트(Navbar.js) - 각 url로 이동하는 <li> 혹은 <button> 이 존재하는 컴포넌트에 해당

import React from 'react'
import { Link } from 'react-router-dom'
export default function Navbar() {
  return (
    <nav className='navbar'>
      <div className='nav-center'>
        <Link to='/'>
          <img src={logo} alt='cocktail db logo' className='logo' />
        </Link>
        <ul className='nav-links'>
          <li>
            <Link to='/'>home</Link>
          </li>
          <li>
            <Link to='/about'>about</Link>
          </li>
        </ul>
      </div>
    </nav>
  )
}

1. 마찬가지로, 'react-router-dom' 에서 <Link>를 import 한다. Router에서 설정한 path로 이동하는 태그이다. (to 속성에 url 부여)
2. <Link>는 DOM에서 <a>태그로 변환한다(Babel). <a>는 이동시 새로고침 되므로 외부, <Link>는 리랜더링되어 내부 이동에 활용

cf) withRouterHOC 구현하는 방법(조건부)

import React from 'react';
import { withRouter } from 'react-router-dom';

class Login extends React.Component {
	
  goToMain = () => {
    if(response.message === "valid user"){
      this.props.history.push('/main');
    } else {
      alert("너 우리 회원 아님. 가입 먼저 해주세요")
      this.props.history.push('/signup');
    }
  }
  
  render() {
    return (
      <div>
        <button className="login-btn" onClick={this.goToMain}>로그인</button>
      </div>
    )
  }
}

export default withRouter(Login);

• 차이점은 goToMain 이라는 조건부 함수가 있다는 것이다. 가불여부에 따라 this.props.history.push(path) 로 이동시킨다.
• 또 다른 차이점으로, export 시 withRouter(컴포넌트) 형태로 송출한다. (HOC, Higher Order Component)
• 추가적으로 처리해야 하는 로직이 있는 경우 사용된다. (로그인 -> 메인 등)

---

React-Router 에는 이외에도 많은 API 기능들을 지원하고 있다. (Location, History 속성 등등... 무슨 기능인진 모르겠다 아직)

여러 페이지를 랜더링하는 대규모 프로젝트에서 추후 공부해야겠지만, 우선 우리가 기본적으로 네비게이션 링크를 구현하는데 필요한 기능들만 우선 습득했다.

 

내일 위코드 세션에서, React-Router 와 SASS 강습이 있는데 적절한 타이밍에 예습 포스팅이 된 것 같다~ 깨꿀~ 😎😎

 

<출처>
Velopert.log : https://velopert.com/3417
SeJun3278 님의 블로그 : https://m.blog.naver.com/sejun3278/221797203201
ki_blank 님의 블로그 : https://velog.io/@ki_blank/React-Router-1.-8njzuummrs