React 환경셋팅 2. React_router_DOM

목차

1. React_router_DOM이란?
2. 라이브러리의 적용 범위
3. 현재 기준 최신버전
4. 설치 커맨드
5. 불러오기

 

---

 

1. React_router_DOM이란?

• 웹 어플리케이션에서 클라이언트와 서버측 라우팅하는 리액트 라이브러리
• UI를 구축하는 JS 라이브러리

 

2. 라이브러리 적용 범위

• Routes 설정
• LInk를 통한 경로 이동
• 레이아웃을 위한 라우터 분할
• 서버 렌더링

등..

 

 

3. 최신 버전 설치(v6  -2021-12-17)

$ npm install react-router-dom

 

 

 

4. 불러오기

• BrowserRouter: 최상위 컴포넌트
• link: a 태그 대신 써야하는 컴포넌트
• Routes: 컴포넌트를 보여주게 함
• Route: URI에 맞는 컴포넌트를 찾아주는 컴포넌트

 

import { BrowserRouter as Router, Link, Routes, Route } from 'react-router-dom'

 

<참고>
사용 시, contex API를 최상위에 올려놓고 시작하는 것처럼 router도 최상위에 올려놓고 시작해야 함
(=APP 컴포넌트 안에서 해야 한다)