* Swith 가 Route 로 대체 되기 전의 내용이다. 업데이트 된 내용은 하단 참조
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";라우터에는 두가지 종류가 있다.
1. Hash Router
2. Browser Router
Switch 가 하는 일은 Route 를 찾는 건데. Route 은 URL을 의미한다.
Route(URL) 을 찾으면 랜더링 한다.
Route 안에다가 컴포넌트를 적어주면 된다. path 속성으로 route(URL)을 적어주면 해당하는 Route에 안에 적어준 Component를 불러준다. 여기서는 기본 URL 에 Home 컴포넌트를 랜더링 해준다.
이제 우리는 reactJS 에게 route 에 따라 정확히 원하는 컴포넌트를 보여달라 요청할 수 있다.
Route 의 path 의 앞부분 부터 일치여부를 따지기에 순서에 유의하자.
우리는 알맞은 Component를 import 해주기만 하면 된다 얼마나 심플한가.
Browser Router 랑 HashRouter의 차이는 URL 의 모습이 다르다.
우리가 아는 URL이 Browser Router 이다.
HashRouter는
/#/~~ 와 같이 조금은 특이하게 생겼다.
대부분이 BrowserRouter를 사용한다.
react-router-dom 은 굉장히 좋은 component들을 담은 컴포넌트들의 모음집이다.
첫번째 컴포넌트는 Router였다.
그 안에 들어가는 건 우리가 유저들에게 보여주고 싶은 것들이다.
Switch 컴포넌트는 한번에 한가지 Route만 랜더링 해주기 위함이다.
React Router에서는 한번에 두개의 Route도 랜더링이 가능하기 때문이다.
우리의 경우에는 한번에 한가지만 랜더링 되길 바라니깐 그럴 필요가 없다.
한 Route 에서 다른 Route 로 이동하는 방법
유저가 영화 화면을 클릭하면 Detail로 가도록 하고 싶기 때문
그렇게 생각할 지도 모른다 그냥 <a> 태그로 link를 해주면 되는 거 아냐? 단순 HTML 이라면 그렇게 했을 것이다.
이것이 동작은 하지만 문제는, 페이지 전체가 리로드 된다는 점이다. 영화제목을 클릭하면 페이지 전체가 재실행 되는 것을 볼 수 있다.
우린 React.js 를 사용하고 있고 재실행(리로드)하는걸 피하고 싶다.
다행인 것은 정확히 이것을 위한 컴포넌트가 있다는 것이다.
Link
브라우저의 새로고침없이 유저를 다른 페이지로 이동시켜주는 컴포넌트이다.
굉장히 강력하다 왜냐하면 아주 빠르게 반응하는 것처럼 보이기 때문이다!
1. 원래는 App 컴포넌트에서 하던 모든걸
2. 다른 컴포넌트로 분리시켜 주었다. App.js 는 비었음
3. 그리고 기존의 App.js 에는 react-router-dom 에서 제공하는 컴포넌트들로 채워놓았음
4. 새롭게 채워진 App.js 가 하는 일은 URL을 지켜보는 일임. 그리고 URL이 바뀌면 어떤걸 보여줄지 결정함. 그리고 이걸 설정하는 것은 굉장히 쉬웠음. 제공된 Route 컴포넌트를 사용해서 어떤 path 에 있는 지에 따라 보여줄 컴포넌트를 적어주면 됨.
5. Route 안에 넣어준 그 무엇이던지 간에 그게 랜더링 됨(화면에 출력됨)
5번의 예시로
유저가 /hello 라는 경로로 올때에만 랜더링 될 것을 알 수 있다.
이렇게 출력되는걸 볼수 있다.
https://nomadcoders.co/react-for-beginners/lectures/3291
All Courses – 노마드 코더 Nomad Coders
초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!
nomadcoders.co