Qwik 기초

Qwik은 "Resumability(재개 가능성)"라는 새로운 개념을 도입하여, 초기 로딩 시 자바스크립트 실행을 거의 제로에 가깝게 만드는 혁신적인 프레임워크입니다.

1. 하이드레이션(Hydration) 문제 해결

기존의 프레임워크들은 서버에서 렌더링된 뒤 브라우저에서 전체 자바스크립트 로직을 다시 실행(하이드레이션)해야 합니다. 이는 페이지 초기 로딩을 느리게 만듭니다.

• Resumability: 서버에서 작업하던 상태를 브라우저에서 그대로 이어서 시작합니다.
• Lazy Execution: 사용자가 상호작용하기 전까지는 어떠한 자바스크립트도 브라우저에서 실행하지 않습니다.

2. 컴포넌트 예제

import { component$, useSignal } from '@builder.io/qwik';

export default component$(() => {
  const count = useSignal(0);

  return (
    <button onClick$={() => count.value++}>
      Count: {count.value}
    </button>
  );
});

$ 표시가 붙은 부분은 소스 코드를 분할하여 필요할 때만 불러오도록 만드는 Qwik의 핵심 표기법입니다.

3. Qwik City

Qwik의 공식 메타 프레임워크로, 파일 기반 라우팅과 API 통신 기능을 제공합니다.

4. 로딩 속도가 중요한 서비스

Qwik은 특히 모바일 환경이나 네트워크가 느린 곳에서 페이지가 즉각적으로 표시되어야 하는 대규모 서비스에 최적화되어 있습니다.