1. Lit

웹 컴포넌트(Web Components)를 쉽게 만들 수 있도록 도와주는 경량의 라이브러리

lit-html : HTML 템플릿을 렌더링하는 데 사용한다.

html`<h1>Hello Tomato!</h1> `


lit-element : lit-html을 내부적으로 사용하여 컴포넌트의 템플릿을 렌더링하여 커스텀 엘리먼트를 만들고, 상태 관리, 속성 정의, Shadow DOM과 같은 기능을 제공한다.



2. 웹 컴포넌트의 특성


Shadow DOM (섀도우 DOM)

  • 컴포넌트의 DOM을 캡슐화하여 외부의 스타일이나 자바스크립트가 내부에 영향을 미치지 않는다.
  • 독립적인 스타일과 구조를 가질 수 있다.


HTML Templates

  • 템플릿과 그 내용을 미리 정의하고 나중에 렌더링할 수 있도록 해준다.
  • <template> 태그를 사용하여 HTML 구조를 미리 정의할 수 있다.


Custom Elements (커스텀 엘리먼트)

  • 개발자가 HTML 태그를 정의할 수 있도록 해주는 API이다.
  • <my-element>와 같은 태그를 만들어 사용할 수 있다.



3. 리액트와 Lit 비교


웹 컴포넌트 표준 지원

  • Lit: 웹 컴포넌트 표준을 따르므로, 기본적으로 브라우저에서 지원되며 다른 프레임워크와의 호환성이 뛰어나다.
  • 리액트: 자체적인 컴포넌트 시스템을 사용하며, 브라우저 표준이 아닌 리액트 생태계 내에서 동작한다.


번들 크기

  • Lit: 경량 라이브러리로, 번들 크기가 작고 성능이 뛰어나다.
  • 리액트: 더 많은 기능을 제공하지만, 상대적으로 무겁다.


상태 관리

  • Lit: 기본적으로 작은 상태 관리가 가능하며, 웹 컴포넌트 내에서 관리한다.
  • 리액트: 리덕스(Redux) 등 외부 상태 관리 라이브러리와 잘 통합된다.


의존성

  • Lit: 브라우저의 기본 API와 표준을 사용하기 때문에 의존성이 적다.
  • 리액트: JSX, Babel 등 추가적인 도구나 설정이 필요하다.


DOM 업데이트

  • Lit: 브라우저의 기본 DOM API를 사용하여 DOM을 업데이트하기 때문에, 중간 비교 과정 없이 바로 변경 사항을 적용할 수 있어 가볍고 빠르다.
  • 리액트: Virtual DOM을 사용하여 전체 UI를 메모리에서 재구성하고, 이를 실제 DOM과 비교하여 변경된 부분만 적용한다. 이 방식은 매우 유연하고 복잡한 상태 관리에 유리하지만, diffing 과정에 추가적인 연산이 필요하다.


브라우저 표준을 기반으로 동작한다?🤷🏻‍♀️

브라우저 표준은 지속적으로 지원되고 업데이트되기 때문에, 웹 컴포넌트는 앞으로도 브라우저에서 계속 호환된다. 따라서 라이브러리나 프레임워크의 버전에 의존하지 않아도 되기 때문에 장기적으로 안정적이고 지속 가능한 개발을 가능하게 한다.



4. Lit 사용의 주요 이점


간단한 API
익숙한 JavaScript와 웹 표준 API로 빠르게 학습 및 사용 가능.


고성능 부분 업데이트와 같은 효율적인 렌더링.

  • 브라우저에서 이미 제공하는 기능을 사용하기 때문에 추가적인 불필요한 코드나 중간 과정을 만들지 않는다. 리액트 같은 라이브러리는 JSX라는 특별한 문법을 사용하고, 이를 브라우저가 이해할 수 있도록 변환하는 과정이 필요하다. 이 과정에서 추가적인 코드와 처리 시간이 필요하지만, Lit은 그런 과정 없이 브라우저가 이해할 수 있는 기본 기능을 그대로 사용하기 때문에 더 효율적이고 빠르게 동작한다.


캡슐화 : Shadow DOM을 통해 스타일과 구조가 보호됨.


호환성 : 다른 프레임워크나 라이브러리와 함께 사용 가능.

  • 프레임워크에 종속되지 않기 때문에, 리액트, 앵귤러, 뷰 등 다양한 프레임워크와 함께 사용할 수 있다. 한 프로젝트에서 다양한 기술 스택을 결합할 때 유리하다.