React-router 주요 컴포넌트

import{BrowserRouter, Switch, Route, Link}from "react-router-dom";

import

Router

<BrowserRouter>

BrowserRouter는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해준다.
ReactDOM의 렌더 단계인 index.js 에 넣어서 활용할 수도 있다. BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용할 수 있다.

Route Machers

<Switch>

<Route>

경로를 매칭해주는 역할을 하는 컴포넌트이다.
컴포넌트는 여러 를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 한다. 를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정한다. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.

Route Changers

<Link>

경로를 연결해주는 역할을 하는 컴포넌트이다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API 를 이용해 페이지의 주소만 변경해준다.
ReactDOM으로 렌더를 시키게 되면 컴포넌트는 <a> 태그로 바뀌게된다.

Question => <a> 태그가 아닌 <Link>를 사용하는 이유

<a>태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킨다. 그래서 새로고침 현상이 일어나게 된다.
하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어있기 때문에 SPA를 구현할 수 있다.

React Twittler SPA

Achievement Goals

• npm을 이용해서 react-router-dom install하기

• 컴포넌트 단위로 Client-side routing 하기

• react-router-dom 을 활용해서 twittler SPA를 구현해보자.