[React Router - 생활코딩] 中 동적 라우팅 하는 방법
https://www.youtube.com/watch?v=WLdbsl9UwDc&t=67s
맨 위에다가
import {BrowserRouter, Route, Switch, Link, NavLink, useParams} from 'react';
1.
spa, 싱글 페이지 애플리케이션을 만들려면
a 태그에다가 href를 쓰는 게 아니라
Link 태그를 써야 한고,
href 대신에 to를 쓴다.
이렇게 하면 라우팅을 페이지의 리로드 없이 처리할 수 있게 된다.
switch는 exact path 대신 쓰는 것.
swith라는 컴포넌트로 route를 감싸면, path와 일치하는 첫번째 컴포넌트를 발견하면 나머지는 버린다.
switch가 없으면 일치하는 것들은 모두 출력함.
여기까지 하면 정적 라우팅.
사용자가 어떤 path로 들어와도 동일한 웹 페이지를 서비스할 수 있는 것이 중요하다. 그걸 하기 위해서 hash router를 쓸 수도 있다. BrowserRouter대신 쓸 수 있는데 일단 그냥 BrowserRouter 쓰면 된다.
해쉬라우터 쓰면 주소가 #/어쩌구저쩌구 이렇게 돼서 주소 자체에서 루트 페이지 이후의 주소를 무시하게 된다.?
2.
NavLink는 링크에 어떤 기능이 추가된 것인데 뭘까?
그냥 링크 컴포넌트에서 이름만 NavLink로 바꾸면 된다. 이걸 쓰면 그 링크에 해당하는 부분을 클릭할 때 active라는 클래스가 자동으로 생긴다. ( to가 /이면 그 하위 주소에 계속 걸린다. 그래서 exact to를 써야 함. )
아무튼 사용자가 지금 위치하고 있는 곳을 표시하고 싶으면
.active{
여기다가 css효과를 줄 수 있다!
}
아 이거 하고 싶었는데 짱이당 ㅋㅋ
3.
Nested Routing이란 뭘까?
function Topics() {
return (
<div>
<h2>Topics</h2>
<ul>
<li><NavLink to "/topics/1">HTML<NavLink></li>
<li><NavLink to "/topics/2">JS<NavLink></li>
<li><NavLink to "/topics/3">React<NavLink></li>
</ul>
<Switch>
<Route path="/topics/1">
HTML is....
</Route>
<Route path = "/topics/2">
JS is....
</Route>
<Route path = "topics/3">
React is...
<Route>
</div>
)
}
일단 이런 식으로 라우터 안에 라우터를 중첩해서 동작하게 만들 수 있다.
<Route path = " /contact/:id"> 이런 부분이 있는데 이게 뭘까?
Topics안에서 1억개의 다른 경로로 이동하고 싶다면? 수동으로 주소 지정하는 게 아니라...자동이 되어야 함.
1. 리스트 자동으로 만들기
var contents = [
{id:1, title:'HTML', description: 'HTML is ... '},
{id:2, title:'JS', description:'JS is ... ''},
{id:3, title:'React', description:React is ..."},
] ----------> 내 프로젝트 같은 경우에는 ajax로 가져온 데이터.
function Topics() {
var lis = [];
for (var i=0; i<contents.length; i++){
lis.push(<li key={contents[i].id><NavLink to={'/topics/'+contects[i].id}>{contents[i].title}</NavLink></li>)
return (
<div>
<h2>Topics</h2>
<ul>
{lis} ----> 이렇게 그 리스트 태그의 목록을 대체해서 훨씬 효율적인 코드가 되었다.
</ul>
</Route>
<Switch>
<Route path="/topics/1">
HTML is....
</Route>
<Route path = "/topics/2">
JS is....
</Route>
<Route path = "topics/3">
React is...
<Route>
</div>
)
}
2. 라우터 자동으로 만들기
하나의 라우터를 가지고 path의 내용에 따라서 정보를 처리하게 만들기는 저 <switch>로 감싸져 있는 <Route>의 반복 부분을
var contents = [
{id:1, title:'HTML', description: 'HTML is ... '},
{id:2, title:'JS', description:'JS is ... ''},
{id:3, title:'React', description:React is ..."},
] ----------> 내 프로젝트 같은 경우에는 ajax로 가져온 데이터.
function Topic(){
var params = useParams(); ----> 유즈파람스라는 훅을 그냥 Topic 컴포넌트 안에서 실행시켜준다.
var topic_id = params.topic_id;
var selected_topic = {
title:"Sorry",
description: "Not Found"
for(var i =0; i<contents.length; i++){
if(contents[i].id===Number(topic_id)){
selected_topic = contents[i];
break;
}
}
return (
<div>
<h3>{selected_topic.title)</h3>
{selectied_topic.description}
</div>
);
}
function Topics() {
var lis = [];
for (var i=0; i<contents.length; i++){
lis.push(<li key={contents[i].id><NavLink to={'/topics/'+contects[i].id}>{contents[i].title}</NavLink></li>)
return (
<div>
<h2>Topics</h2>
<ul>
{lis}
</ul>
<Route path = "topics/:topic_id"> ---> 여기서 바뀌는 부분이 topic_id이다.
<Topic></Topic>
</Route>
</div>
)
}
우리가 하고 싶은 것: 여기서 topic_id 값에 해당되는 컨텐츠(배열의 객체)를 가져와서
function Topic() 에서 리턴될 콘텐츠를 만들어내는 것이다.
그 전에 <Topic>이라는 컴포넌트 안에서 Topic이 화면에 출력된 이후인 Route의 이 값이 topic_id가 무슨 값을 가리키는지를 알아내는 것을 할 줄 알아야 된다.
그걸 하기 위해서는 API의 HOOKs중에서 useParams를 써야 한다.