[Achievement Goal]
- 라우팅의 개념에 대해 알 수 있다.
- React Router DOM의 컴포넌트를 사용 할 수 있다.
- BrowserRouter
- Switch
- Route -> exact path ? path ?
- Link -> to
앞서 SPA 는 하나의 페이지 안에서 변경이 필요한 컴포넌트만 조작한다고 하였는데, 조작후 새로운 페이지로 이동 할 일이 생기는 경우가 많다.
그에따라 새로운 페이지로 이동할 주소도 달라지게 되는데 이를 라우팅 이라고 한다.
리액트 자체에 이 기능이 있는것은 아니므로 React Router 라이브러리를 설치하고, 개발자가 직접 주소를 부여해야 한다.
npm install react-router-dom터미널에 설치 후,
import { BrowserRouter , Switch , Route , Link} from 'react-router-dom';각 컴포넌트 네가지를 import 해준다.
- 라우터의 주요 컴포넌트 4가지
(1) BrowserRouter
라우터의 주 역할을 해주는 기능.
라우터식구들의 최고봉, 조부모? 같은 느낌.
브라우저 라우터 안에 다 넣어줘야 제대로 작동한다.
관심사 분리한답시고 BrowserRouter 안에 넣어주지 않으면 아래와 같은 오류가 생긴다. (나의 경험.)
상황에 따라 다르겠지만
만약 라우터를 쓸 계획이라면 애초에 첫 메인화면에 쑤셔넣는것도 좋은 방법일 , 듯,, ㅎ
(2) Switch
경로를 매칭해주는 기능.
(3) Route
경로를 매칭해주는 기능, 내가 여태까지 배운 바로는 Switch 를 부모삼아, 항상 같이 다니는 것 같다.
Route 는 path 속성과 같이 쓰여서 밑에 나올 Link 속성과 주소를 매칭시키는 역할을 한다.
🧐 exact path ? path ?
Route 에서 쓰이는 속성 path 는 위에서부터 아래로 훑는 성격으로 만약 첫번째 경로가 '/' 이고 밑의 경로가 '/anotherPage' 라면 / 가 중복되기 때문에 이동이 되지 않는 경우가 생긴다.
이럴 경우, exact path = '/' 를 맨 위에 작성해주어 정확하게 '/' 일때만 매칭시켜주게 한다.
(4) Link
경로를 변경하는 기능으로 Switch > Route 에서 정해준 주소를 작성해준다.
여기서 작성해야 비로소 이동이 가능하며, 속성으로는 to 를 작성해준다.
<Link to = '/' />참 쉽쥬?
