React - React의 router

 

 

Routing란?

간단히 말하면, 경로 이동 혹은 페이지 이동이라고 생각하면 된다.

예를 들어 사용자가 로그인을 위해 /Login에 접근했을 때, react-router는 로그인 페이지를 렌더링 해준다.

하지만, Create React App(CRA)에 특별히 routing(경로 이동)을 위한 로직이 들어있지 않기 때문에 따로 설치해서 사용해야 한다.

왜냐하면, React는 프레임워크가 아니라 오로지 뷰로만 이루어진 라이브러리 이기 때문에, 필요한 기능들을 따로 설치해서 사용해야만 한다.

reacttraining.com/react-router/web/guides/quick-start

React Router: Declarative Routing for React

 

react-router 설치 명령어

npm install react-router-dom --save

 

react-router 사용

src 폴더 바로 하위에서 Router.js를 생성하고 위치시킨다.

Routes.js 

 

1. import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

react-router-dom

DOM에 접근하고 DOM이 인식할 수 있는 컴포넌트들만 뺀 라이브러리이다.

<BrowserRouter>

우리가 구현할 어플리케이션에 BrowserRouter를 적용한 것이다.

또, <Route>와 <Switch>는 경로를 컴포넌트와 매칭 시키기 위한 라우트 컴포넌트이다.

<Route>

Route에 있는 Component 속성에는 화면에 보여줄 Component를 값으로 준다.

따라서, 경로와 Component들을 매칭 하여 경로와 컴포넌트가 매칭이 된다면 그 컴포넌트를 보여준다.

만약 경로가 맞지 않다면 null을 반환한다.

exact 키워드는 정확한 path 가 들어왔을 때만 컴포넌트를 렌더링 해줍니다.

<Switch>

모든 <Router> 요소들을 반복하면서, 현재 위치와 일치하는 첫 번째 요소만 렌더링 해준다.

이는 경로가 동일한 컴포넌트들이 있을 때, 그리고 매칭 되는 경로가 없을 때 와 같은 상황을 식별할 때 도움된다.

만약 매칭되는 경로가 없을 때는 <Route>와 달리 404페이지를 반환해줍니다.

 

2.

 <Router>

        <Switch>

          <Route exact path="/" component={Login} />

          <Route exact path="/Main" component={Main} />

        </Switch>

      </Router>

- exact path ="/"의 의미는 브라우저의 초기 defalte를 의미하며, component={Login}은 Login 화면을 의미한다. 

- exact path="/Main"의 의미는 경로를 Main 컴포넌트로 지정하고, component={Main}은 Main 화면을 의미한다.

따라서, 경로를 지정하면 각 해당하는 컴포넌트가 화면이 보일 것이다.

 

Route 이동하는 방법

1. Link 컴포넌트를 사용하는 방법

Routes에서 설정한 path로 이동하도록 구현하려면 Link 컴포넌트를 사용한다.

이 Link 컴포넌트는 DOM에서 <a> 태그로 변환되므로, a태그를 사용하고 싶지 않다면 Link를 사용 안 해도 된다.

<Link to = "경로"> </Link> 를 사용하여 경로를 이동할 수 있다. 

 

2. withRouter HOC로 구현하는 방법

Link를 사용하지 않고, 요소에 onClick 이벤트 달아서 이동하고 싶은 곳으로 넘기는 방법도 있다.

goToMain라는 event handler에서 구현한 것처럼 this.props의 history에 접근해서 이동할 수 있다.

받은 history의 push 메서드에 이동할 path를 인자로 넘겨주면, 해당 라우트로 이동할 수 있다.

이 컴포넌트에서 props에 route 정보(history)를 받으려면 export 하는 class에 withRouter로 감싸주어야 한다.

withRouter같이 해당 컴포넌트를 감싸주는 것을 higher-order component(이하 HOC) 라고 한다.