웹 컴포넌트에서 라우팅을 하는 법을 알아보도록 하겠습니다. 기존의 라우팅 처럼 해당 페이지를 불러와서 렌더링 한다기 보다, 웹 컴포넌트를 교체하는 방식이라고 생각하시면 편할거라 생각합니다.
라우팅을 하기위해 '@vaadin/router'라는 라이브러리를 설치하도록 하겠습니다.
yarn add @vaadin/router
'@vaadin/router'는 A CLIENT-SIDE ROUTER FOR WEB COMPONENTS, 웹 컴포넌트를 위한 클라이언트 사이드 라우터 입니다. 이전에는 'index.html'안에 웹 컴포넌트를 직접 불러와 사용하였지만 '@vaadin/router'를 사용하여 웹 컴포넌트를 교체하도록 하겠습니다.
'index.html'에 <main>컴포넌트를 만들도록 하겠습니다.
index.html
<body>
<main></main>
<script src="/vendor/webcomponents-loader.js"></script>
</body>앞에서 만든 <main>태그를 라우터로 만들어 내부에 웹 컴포넌트를 불러오도록 하겠습니다.
index.ts
import "./styles/styles.css";
import "./pages/lit-tomato";
import { Router } from "@vaadin/router";
window.addEventListener("load", () => {
initRouter();
});
function initRouter() {
const router = new Router(document.querySelector("main"));
router.setRoutes([
{
path: "/",
component: "lit-tomato",
},
]);
}<main>태그를 불러와 경로가 "/"라면 'lit-tomato' 컴포넌트 불러오도록 설정하였습니다. 'lit-tomao'를 사용하기 위해 import를 해주었는네, 이를 다음과 같은 방식으로 경로가 변경될 때 불러 올 수 있습니다.
function initRouter() {
const router = new Router(document.querySelector("main"));
router.setRoutes([
{
path: "/",
component: "lit-tomato",
},
{
path: "/lit-potato",
component: "lit-potato",
action: () => {
import("./pages/lit-potato");
},
},
]);
}'/lit-potato'경로를 주소창에 입력해 본다면 'lit-potato'컴포넌트가 <main>태그 안에 렌더링 된 것을 확인 할수 있었습니다.
이번에는 depth가 있는 경로를 가진 컴포넌트를 다뤄보겠습니다. 경로가 '/vegetable/lit-tomato'라면 어떻게 만들어야 할까요?
간단하게 path를 경로와 맞게 설정해주면 됩니다.
{
path: "/vegetable/lit-tomato",
component: "lit-tomato",
},이번에는 children이라는 속성을 이용하여 '/vegetable/lit-tomato'경로를 설정해보도록 하겠습니다.
{
path: "/vegetable",
component: "lit-tomato",
children: [{ path: "/lit-tomato", component: "lit-tomato" }],
},브라우저에 '/vegetable/lit-tomato' 경로로 이동하여 보면 'lit-tomato' 컴포넌트가 렌더링 된 것을 확인 할 수 있습니다.
동적라우팅
동적 경로를 설정하는 것 또한 간단합니다. 전달받을 query를 :를 사용하여 동적페이지를 만들 수 있습닏다.
{
path: "/vegetable/:name",
component: "lit-tomato",
},기존에 없던 경로인 '/vegetable/lit-apple'을 브라우저에 입력하면 lit-tomato 컴포넌트가 나타나는 것을 확인 할 수 있습니다.
작성한 코드는 https://github.com/jerrynim/jerrynim-lit-project 에서 확인할 수 있습니다.
..
.
.
.
.
.
.
.
.
