React | react-router로 라우팅 기능 사용하기

Yeseul·2021년 4월 29일
0

React

목록 보기
3/3
post-thumbnail

SPA (Single Page Application)

페이지가 한 개인 어플리케이션

전통적인 웹앱의 구조는 한 페이지당 하나의 html 문서를 가지고 있는, 즉 여러 페이지로 구성된 형태이다. 이런 형태는 다른 페이지로 이동될 때마다 매번 서버에서 리소스를 새롭게 다운로드받고 화면에 렌더링한다.

이런 점은 웹사이트가 복잡해지면서 효율성 측면에서 좋지 않다. 싱글페이지 어플리케이션은 하나의 페이지를 갖는 어플리케이션으로 하나의 페이지 안에서 여러 서브 경로를 갖고 경로에 따라 다른 페이지를 렌더링한다. 그리고 이런 기능을 구현하는것이 "라우팅"이다. 하지만 리액트는 이런 기능을 내장하고 있지 않기 때문에 별도의 라우터가 필요하다.

지난 시간에 그중에 가장 많이 사용하는 react-router를 설치했는데 이 라이브러리로 라우팅 기능을 구현해보도록 한다.

Routing in React

1. Routes 컴포넌트 구현하기

// Routes.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Login from './pages/Login/Login';
import Main from './pages/Main/Main';
import PageNotFound from './pages/PageNotFound/PageNotFound';

class Routes extends React.Component {
  render() {
    return(
      <Router>
      	<Switch>
      	  <Route exact path="/" component={Login}/>
      	  <Route exact path="/main" component={Main}/>
          <Route component={PageNotFound}/>
        </Switch>
      </Router>
    )
  }
}

export default Routes;

Routes 컴포넌트는 기본적으로 'react-router-dom'의 BrowserRouterSwitch, Route 를 필요로 한다. 이것들로 한 페이지 안에서 서브 경로가 "a 일 때 A 컴포넌트를 렌더링하겠다"는 것을 지정해준다.

  • Switch
    Switch조건을 만족하는 하나의 컴포넌트만을 렌더링한다.
    Switch를 사용하지 않아도 라우팅 기능을 적용이 되지만,
    위의 상황처럼 path 경로를 지정하지 않은 <Route>가 있을 경우 Switch가 없으면 기본적으로 모든 페이지에서 컴포넌트 PageNotFound를 렌더링한다. 하지만 Switch가 있으면 조건을 만족하는 하나의 컴포넌트만 렌더링하고, 위의 모든 조건에 만족하지 않았을 때 기본값으로 PageNotFound 컴포넌트를 렌더링하게 된다.

  • exact
    조건이 정확히 일치하는 컴포넌트를 렌더링한다. (경로 === path)
    예를 들어 exact가 없을경우, 경로가 '/main'일 때 '/'와 '/main'의 컴포넌트를 둘다 렌더링한다.


2. Route 이동하기

Routes.js에서는 각 페이지에 서브 경로를 부여하여 한 페이지 내에서 다른 컴포넌트를 렌더링하도록 했다. 이제 컴포넌트 내에서 라우팅 기능이 동작하게 하는 매개체가 필요하다. 이런 매개체 역할을 하는 엘리먼트를 만드는 데는 두 가지 방법이 있다.

  1. <Link>
  2. withRouterHOC
// Main.js
import React from 'react';
import { Link } from 'react-router-dom';

class Main extends React.Component {
  render() {
    return(
      <div className="main">
        ...
        <Link to="/">
      </div>
    )
  }
}

export default Main;
  1. 'react-router-dom'에서 Link 컴포넌트를 가지고 온다.
  2. 구현할 컴포넌트 안에 Link 태그를 넣는다.
  3. to 속성을 사용하여 이동할 경로를 지정해준다.

<Link 태그는 a 태그로 렌더링 된다. 스타일링할 땐 a 태그명이나 별도의 클래스를 통해 할 수 있다.

withRouterHOC 사용하기

// Login.js
import React from 'react';
import { withRouter } from 'react-router-dom';

class Login extends React.Component {
  goToMain() {
    this.props.history.push('/main');
  }
  render() {
    return(
      <div className="login">
        ...
        <button onClick={this.goToMain}>
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);
  1. react-router-dom 에서 withRouter를 가져온다.
  2. 컴포넌트 안에 페이지를 이동하는 메소드를 추가한다.
    this.props.history.push( _경로_ )
  3. 컴포넌트 안에 엘리먼트에 이벤트가 발생했을 때 메소드를 실행시켜 페이지를 이동할 수 있다.
  4. 컴포넌트를 내보낼 때는 꼭 withRouter로 감싸서 내보내야 한다.

  • Link 태그는 a 태그처럼 사용되기 때문에 '클릭 시 이동'이 기본 실행 동작이다. 그렇기 때문에 이런 기본 로직을 요구로 할 때 적합하다.
    ex. 프로젝트 외의 이동

  • withRouter 의 경우에는 메소드를 직접 작성하는 것이기 때문에 '클릭 시' 뿐 아니라 다른 로직을 추가할 수 있다. 가령 인증과 같은 조건이 필요할 때이다.
    ex. 프로젝트 내 이동, 로그인-> 회원가입/ 메인페이지


SPA란?
<Switch>는 언제 써야할까

profile
하루하루, 차곡차곡 👩🏻‍💻

0개의 댓글