들어가기에 앞서
1편 (React Router에 대한 이야기 -1)
(https://velog.io/@lgr6952/React-Router%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%B4%EC%95%BC%EA%B8%B0)
- SideBar Menu를 구현해야하는 요구사항이 있었다.
왼쪽에 사이드바를 구현하고 클릭하는 시점에 화면이 이동되는 형태로 구현이 필요했다. - Sidebar Menu의 경우 Component를 주입하여 개발했던 경험이 있었지만, 뒤로가기, 외부에서 해당 메뉴로 바로 진입등 url을 통한 접근이 필요한 상황이었다.
- System에 적용되어있는 Connected-React-Router를 활용하여 SideBar를 구성하면서 겪었던 내용을 정리하고자 한다.
React Router란 무엇인가
- History Stack을 조작할 수 있어야 한다.
- Url과 Route를 일치시킬 수 있어야 한다.
- 해당 Route에 맞는 UI Component를 불러올 수 있어야 한다.
오늘은 2번 'Url과 Route를 일치시킬 수 있어야 한다.' 에 대한 이야기를 해보려고 한다.
2. Url과 Route를 일치시킬 수 있어야 한다.
url과 route가 일치한다는 것은 무엇일까?
url은 당연히 바라보는 경로와 일치하는 것이 아닐까?
Routing의 정의
the process of sending information from one computer network to another[출처] : https://dictionary.cambridge.org/ko/%EC%82%AC%EC%A0%84/%EC%98%81%EC%96%B4/routing
말 그대로 Routing이란 컴퓨터 네트워크간 정보를 전송하는 과정을 의미한다.
따라서 이때 Route는 정보를 전송하는 경로를 의미하고, 내 Brouser에서 Server의 자원(개발자가 열어놓은)으로 접근하는 경로를 의미한다.
이러한 경로를 표기하는 규약을 URL(Uniform Resource Locator 또는 통칭 web address, 문화어: 파일식별자, 유일자원지시기) 이라고 한다.
따라서 네트워크 상에서 우리는 url을 통해 해당 리소스를 참조하게 된다.
"Url과 Route를 일치시킬 수 있어야 한다."의 의미는 개발자가 열어놓은 접근 경로를 실제 Server 자원으로의 경로를 맞춤으로 개발자의 의도대로 해당 자원에 접근할 수 있는 상태를 만드는 것을 의미한다.
따라서 우리는 오늘 여기에서 내 소스 경로와 url경로를 일치시켜 원하는 컴포넌트로 연결할 수 있도록 하는데 목적을 두려한다.
사용하는 Component
해당 컴포넌트들은 React Router로부터 불러와서 사용한다.
import {Switch, Route, Link} from 'react-router-dom'- <Route>
내가 이동할 경로에 맞는 컴포넌트를 매핑해준다.
해당 경로와 url을 매칭시켜주는 역할을 한다.
<Switch>
<Route path="경로" element={컴포넌트} />
</Switch>- <Switch>
Route는 해당 경로 호출시 이에 맞는 컴포넌트를 불러오게 되는데,
경로가 중복될 경우 문제가 해당 경로로 매핑된 url 모두가 렌더링된다.
Switch는 경로가 중복될 경우 가장 첫번째 오는 경로를 찾아 매핑한다.
// 첫번쨰 예제
<Switch>
<Route path="/경로" element={컴포넌트1} />
<Route path="/경로1" element={컴포넌트2} />
</Switch>// 두번째 예제
<Route path="/경로" element={컴포넌트1} />
<Route path="/경로1" element={컴포넌트2} />'/경로'를 호출할 경우 첫번째 예제는 '컴포넌트1'을 렌더링하지만,
두번째 예제는 '컴포넌트1'과 '컴포넌트2'가 모두 렌더링되는 문제(?)를 발생시킨다.
이를 방지하기 위하여 아래처럼 exact 속성을 넣어주어 제어할 수도 있다.
// 세번째 예제
<Route exact path="/경로" element={컴포넌트1} />
<Route path="/경로1" element={컴포넌트2} />- <Link>
Link는 해당 경로로 url을 이동시켜주는 컴포넌트이다.
React Router V5 이전버전의 경우 useHistory를,
React Router V6의 경우 useNavagate를 사용하여 대체할 수 있다.
<Link to={경로}>이동</Link>
// React Router V5 이하
<Button onClick={() => {useHistory.push(경로)}}>이동</Button>
// React Router V6
<Button onClick={() => {useNavigate(경로)}}>이동</Button>
😀 <Link>와 <a href>의 차이
Link는 1편에서 설명한 History api를 가지고 브라우저의 url만 바꾼다.
a href는 페이지를 새로 불러온다 (처음부터 다 다시 렌더링한다..)
따라서 SPA를 표방하는 React에서는 Link로 url을 변경한다.(이동한다.)
그래서 내가 원하는 경로를 어떻게 잡아줄까
우선 익숙한 아래 코드를 한번 보자
import * as React from "react";
import { BrouserRouter, Route, Outlet, Link } from "react-router-dom";
export default function App() {
return (
<div>
<h1>Basic Example</h1>
<BrouserRouter>
<Route path="/" element={<Layout />}> // path뒤에 원하는 경로가 온다.
<Route index element={<Home />} />
<Route path="about" element={<About />} /> //about으로 가면..
</Route>
</BrouserRouter>
</div>
);
}개발자가 의도한 경로는 아래와 같이 잡아준다.
//원하는 path르 이동할 경우를 의미한다.
//해당 경로로 접근할 경우 해당 위치에 element를 불러온다.
<Route exact path="경로" element={Component} />- exact props를 넣어주면 경로와 완벽하게 일치할 경우에만 해당 컴포넌트와 연결한다.
- exact를 사용하지 않을 경우 위 예제처럼 route 하위에 sub routing이 가능하다.
url get parameter를 활용할 수 있다.
아래 공식 홈페이지에서 가져온 예제를 살펴보자
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useParams
} from "react-router-dom";
export default function ParamsExample() {
return (
<Router>
<div>
<h2>Accounts</h2>
<ul>
<li>
<Link to="/netflix">Netflix</Link>
</li>
<li>
<Link to="/zillow-group">Zillow Group</Link>
</li>
</ul>
<Switch>
// 이부분이 중요하다.
// 해당 링크로 접속하면 id를 변수화하여 전달한다.
<Route path="/:id" children={<Child />} />
</Switch>
</div>
</Router>
);
}
function Child() {
// 이때 useParams라는 hooks를 활용하여 id 파라미터 값에 접근할 수 있다.
let { id } = useParams();
return (
<div>
<h3>ID: {id}</h3>
</div>
);
}
- 지난 시간에 배웠던 history를 응용하면 얼마든지 값을 가져올 수 있다.
- history를 응용하지 않더라도 경로에 콜론과 함께 변수 명을 지정하면 해당 값을 useParams hooks를 통해 가져올 수 있다.
3편에서 계속...
부족한 글 봐주셔서 감사합니다.
피드백, 지적은 항상 감사합니다.
