lit-프로젝트 시작하기 - (6/6) - 라우팅

jerrynim_·2020년 11월 16일
2

lit-project 시작하기

목록 보기
6/6
post-thumbnail

웹 컴포넌트에서 라우팅을 하는 법을 알아보도록 하겠습니다. 기존의 라우팅 처럼 해당 페이지를 불러와서 렌더링 한다기 보다, 웹 컴포넌트를 교체하는 방식이라고 생각하시면 편할거라 생각합니다.

라우팅을 하기위해 '@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 에서 확인할 수 있습니다.
..
.
.
.
.
.
.
.
.

profile
Basic in the end👻

0개의 댓글