React Router

1. understanding Routing
2. React Router
3. React Router 활용
4. React Router 사용 환경 셋팅

 

1.  understanding Routing 

- SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않음 

- 예를 들어 Twitter와 같은 SPA를 만들 때, 메인 트윗 페이지 모음, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요 할 수 있음 

- 또한 이 화면에 따라 '주소'도 달라짐 

- 이렇게 다른 주소에 따라 다른 뷰를 보여 주는 과정을 '경로를 변경한다'라는 의미로 라우팅이라고 함

---

2. React Router

- React 자체에는 이 기능이 내장 되어 있지 않음 → 우리가 주소마다 다른 뷰를 보여 줘야 함 

- React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용 

---

3. React Router 활용 

 

React Router의 주요 컴포넌트

- React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있음

  <BrowserRouter> : 라우터 역할을 함

  <Routes>, <Route> : 경로를 매칭 해주는 역할 

  <Link> : 경로를 변경하는 역할

 

- 이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 하고 명령어를 통해 사용할 수 있음 

 

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

- import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructing assignment) 와 비슷하게 이용할 수 있음

---

4. React Router 사용 환경 세팅

 

4.1. react-router 라이브러리 설치

# simpleroute 폴더에 React App 설치 
npx create-react-app simpleroute
cd simpleroute

# react-router 라이브러리 설치
npm install react-router-dom@^6.3.0

- create-react-app으로 React 프로젝트 환경을 만들 수 있음

- 그 환경에 React Router 라이브러리도 설치 할 수 있음!

- npm 명령어를 통해 간단하게 설치 할 수 있음

 

4.2 App.js로 react-router 컴포넌트 꺼내오기

import React from "react";
import {Browser, Routes, Route, Link} from "react-router-dom";

export default function App(){
  return (...)
}

- 컴포넌트를 꺼내오기 위한 import 구문 작성