React - Route로 컴포넌트 렌더링하기

 

1. react-router-dom 설치

npm install react-router-dom

yarn add react-router-dom

React에서 route기능을 사용하려면 우선적으로 react-router-dom을 설치해야 한다.

 

2. import 부분

import { Route, Router, Switch, Link } from 'react-router-dom';

라우트 기능을 사용할 때 많이 사용되는 4가지 모듈을 불러온다.

 

 

Route

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

• path : 주소창의 경로를 지정한다.
• exact : 주소창의 경로와 완벽하게 일치할 때, 이 라우트의 컴포넌트를 보여준다는 의미한다.
• component : 보여줄 컴포넌트를 의미한다.

Route 컴포넌트는 path옵션을 통해 주소창의 주소와 일치하는 컴포넌트들을 불러와 보여주는 역할을 한다.

Route 컴포넌트의 특이한 점은 경로의 전체가 아닌 일부분, 즉 앞 부분만 일치하여도 컴포넌트를 불러오는 특징을 가지고 있다. 이러한 특색으로 인해, path="/"에 exact 옵션이 붙지 않을 경우, 앞 부분 경로가 일치하는 다음 컴포넌트도 불러오게 된다.

/ 경로의 컴포넌트만 불러오고 싶은데, 다른 컴포넌트도 불러와지는 의도치 않은 경우를 방지하고자 보통 path="/" 컴포넌트에 exact옵션을 추가한다. exact옵션을 통해 경로가 완벽하게 일치해야 해당 컴포넌트들 불러오도록 옵션을 추가한 것 이다.

 

Router

<Router>
  <Route />
  <Route />
  <Link />
</ Router>

Router 컴포넌트는 Route와 Link를 묶어주는 상위의 컴포넌트이다. Route와 Link가 유동성있게 동작을 하도록 하기 위해 묶어주는 역할을 한다.

 

Switch

<Switch>
  <Route path="/some" component= { Some } />
  <Route path="/some/thing" components= { Something } />
</ Switch>

Switch태그는 경로와 일치하는 Route들 중, 가장 먼저 매칭된 것만 보여준다.

Route를 앞 부분의 경로만 일치하여도 여러개의 컴포넌트들을 렌더링하는 속성을 가지고 있다.

Switch태그와 Route의 exact 옵션 둘다 일치하는 경로에 해당하는 경우만 렌더링 한다는 공통점을 가지고 있다. Switch태그가 있는 경우에는 전체 라우트 중에서 일치하는 하나만 렌더링 하고, 없는 경우에는 경로가 일치하는 컴포넌트들을 여러개 렌더링할 수 있다.

 

 

Link

<Link to="/something" />

Link 컴포넌트는 HTML에서 사용한 a 태그와 비슷한 기능을 한다. 하지만 a와 Link 사이에는 차이점이 하나 존재한다.

a태그는 href에 이동할 페이지의 경로를 추가하여 사용한다. 그 후, 해당 a태그를 클릭하게 되면 페이지가 이동한다.

하지만 Link태그는 to 를 통해 이동할 페이지의 경로를 추가하여 사용하지만, 해당 태그를 클릭하여도 페이지 이동은 하지 않고 주소창의 주소가 바뀌는 것을 확인할 수 있다.

Link 태그를 통해 주소의 경로가 바뀌게 되면, 각각의 Route는 경로가 일치하는 Route 컴포넌트가 존재하는지 확인한다. 일치하는 Route가 있을 경우, 해당 Route의 컴포넌트를 렌더링하여 화면에 보여주게 된다.

 

리액트에서는 페이지를 이동시켜 새로운 컴포넌트들을 보여주는 방식이 아닌, 부분적인 요소만 새로이 렌더링하여 보여주는 방식으로 동작한다. 그렇기에 완전히 페이지를 새로 불러와 렌더링하는 a태그 대신에 Link태그를 사용하는 것을 권장한다.