자바스크립트 + 리액트 디자인 패턴

350

자바스크립트 + 리액트 디자인 패턴

Eveventy

+

Preact

마커스 오버레너

Markus

Oberlehner

19

는 정적 사이트 생성기인

Eleventy

와 부분적으로 하이

드레이션될 수 있는 동형

Preact

컴포넌트를 함께 사용하는 방법을 보여줍니다. 이 방법

은 지연 하이드레이션도 지원하며, 컴포넌트 자체가 선언적으로 하이드레이션을 제어하

고, 상호작용 컴포넌트는

WithHydration

래퍼를 사용하여 클라이언트에서 하이드레이

션됩니다.

Marko

와

Eleventy

는 제이슨이 정의한 아일랜드 아키텍처 이전에 등장했지만, 그래도 아일

랜드 아키텍처에 필요한 기능을 어느 정도 갖추고 있습니다. 반면에

Astro

는 처음부터 아일

랜드 아키텍처를 기반으로 만들어졌기 때문에 기본적으로 아일랜드 아키텍처를 지원합니다.

13.9.2

아일랜드 아키텍처의 장점과 단점

아일랜드 아키텍처를 도입하면 얻을 수 있는 몇 가지 이점은 다음과 같습니다.

성능

클라이언트에 전송되는 자바스크립트 코드의 양을 줄입니다. 상호작용이 필요한 컴포넌

트에만 스크립트가 전송되므로, 전체 페이지의 가상

DOM

을 다시 생성하고 모든 요소

를 하이드레이션하는 데 필요한 스크립트보다 필요한 코드의 양이 훨씬 적습니다. 이렇게

자바스크립트 크기가 작아지면 페이지 로드 속도는 자연스레 빨라질 수 밖에