[CS] React Router Day-20

npm install react-router-dom

SPA와 Routing

SPA는 하나의 페이지를 보여주지만 사실 한 화면만 가지고 있는 것이 아닙니다.

각 페이지별 다른 화면이 존재하지만 공통된 부분을 계속 유지하고 있는 것일 뿐입니다.

중요한 점은 각 페이지별 주소가 달라지고, 주소에 따른 뷰를 보여주는 과정에서 경로를 변경하게 됩니다. 이걸 Routing이라고 합니다.

사용자의 요청에 따라 각 주소마다 다른 뷰를 보여줘야 합니다.

React Router

라운팅을 위해 React Router라는 라이브러리를 가장 많이 사용합니다.

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

import를 통해 필요한 모듈을 불러오고 비구조화 할당(destructuring assignment)과 비슷하게 이용할 수 있습니다.

React Router 활용

• Browser Router: 라운터 역할
• Switch: 경로를 매칭
• Route: 경로를 매칭
• Link: 경로를 변경

Switch, Route

경로를 매칭해주는 역할을 하는 컴포넌트입니다.
Switch 컴포넌트는 여러 Route를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜주는 역할을 합니다.
Switch를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다.

Route 컴포넌트는 Path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정합니다. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동됩니다.

Link

경로를 연결해주는 역할을 하는 컴포넌트입니다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플레이케이션을 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해 줍니다.

ReactDOM으로 렌더를 시키면 Link 컴포넌트는 a 태그로 바뀌는 모습을 볼 수 있다.