-
Routing : 다른 주소에 따라 다른 뷰를 보여주는 과정
-
개발 환경 구축하기
React Router DOM 설치
npm install react-router-dom@5.3.0
react-router 라이브러리가 제공하는 컴포넌트들을 사용하기 위한 세팅
import React from 'react'
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
- Router 컴포넌트
*BrowserRouter :
-웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할
-BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용 가능
*Switch :
-여러 Route를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할
-Switch를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
*Route :
-path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정하기
-Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동
*Link :
-경로를 연결해주는 역할을 하는 컴포넌트
-페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API 를 이용해 페이지의 주소만 변경
