첫 번째 Astro 아일랜드를 구축

Preact 컴포넌트를 사용하여 무작위로 선택된 환영 메시지로 방문자를 맞이하세요!

요구 사항

Astro 프로젝트에 Preact 추가
홈 페이지에 Astro 아일랜드 (Preact .jsx 컴포넌트)를 포함합니다.
client: 지시어를 사용하여 아일랜드를 대화형으로 만듭니다.

Astro 프로젝트에 Preact 추가

실행 중인 경우 개발 서버를 종료하여 터미널을 실행합니다 (단축키: Ctrl + C).
단일 명령으로 Astro 프로젝트에서 Preact 컴포넌트를 사용하는 기능을 추가합니다.
- npm
- pnpm
- Yarn
Terminal window
npx astro add preact
Terminal window
pnpm astro add preact
Terminal window
yarn astro add preact
명령줄 지침에 따라 프로젝트에 Preact 추가를 확인합니다.

Preact 인사말 배너 포함

이 컴포넌트는 인사말 메시지 배열을 prop으로 사용하고 그중 하나를 무작위로 선택하여 환영 메시지로 표시합니다. 사용자는 버튼을 클릭하여 새로운 무작위 메시지를 받을 수 있습니다.

Greeting.jsx라는 이름의 새로운 파일을 src/components/에 만듭니다.

.jsx 파일 확장자를 참고하세요. 이 파일은 Astro가 아닌 Preact로 작성됩니다.

Greeting.jsx에 다음 코드를 추가합니다.

import { useState } from 'preact/hooks';

export default function Greeting({messages}) {

  const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))];

  const [greeting, setGreeting] = useState(messages[0]);

  return (
    <div>
      <h3>{greeting}! Thank you for visiting!</h3>
      <button onClick={() => setGreeting(randomMessage())}>
        New Greeting
      </button>
    </div>
  );
}

홈 페이지 index.astro에서 이 컴포넌트를 가져와 사용하세요.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
  <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
</BaseLayout>

브라우저에서 미리보기를 확인하세요. 임의의 인사말이 표시되지만 버튼이 작동하지 않습니다!

client:load 지시어를 사용하여 두 번째 <Greeting /> 컴포넌트를 추가합니다.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
  <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
  <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
</BaseLayout>

페이지를 다시 방문하여 두 컴포넌트를 비교하십시오. 두 번째 버튼은 페이지가 로드 될 때 client:load 지시어가 Astro에게 클라이언트 에서 JavaScript를 보내고 다시 실행하도록 지시하여 컴포넌트를 대화형으로 만들기 때문에 작동합니다. 이것을 수화된 컴포넌트라고 합니다.

차이점이 명확해지면 수화되지 않은 인사말 컴포넌트를 제거합니다.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
  <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
  <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
</BaseLayout>

패턴 분석

살펴볼 다른 client: 지시어가 있습니다. 각각은 서로 다른 시간에 클라이언트에 JavaScript를 보냅니다. 예를 들어 client:visible은 컴포넌트가 페이지에 표시될 때만 컴포넌트의 JavaScript를 보냅니다.

다음 코드가 포함된 Astro 컴포넌트를 생각해 보세요.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import AstroBanner from '../components/AstroBanner.astro';
import PreactBanner from '../components/PreactBanner';
import SvelteCounter from '../components/SvelteCounter.svelte';
---
<BaseLayout>
  <AstroBanner />
  <PreactBanner />
  <PreactBanner client:load />
  <SvelteCounter />
  <SvelteCounter client:visible />
</BaseLayout>

다섯 가지 컴포넌트 중 어느 것이 수화된 아일랜드가 되어 JavaScript를 클라이언트에 전송하게 됩니까?

<PreactBanner client:load /> 및 <SvelteCounter client:visible />이 수화된 섬이 됩니다.
두 <PreactBanner /> 컴포넌트는 어떤 면에서 동일하고 어떤 면에서 다를까요?

동일: 둘 다 동일한 HTML 요소를 표시하고 처음에는 동일하게 보입니다. 다름: client:load 지시어가 있는 컴포넌트는 페이지가 로드된 후 다시 렌더링되며, 포함된 모든 대화형 요소가 작동합니다.
SvelteCounter 컴포넌트에 숫자가 표시되고 숫자를 늘리는 버튼이 있다고 가정합니다. 웹사이트의 코드가 보이지 않고 실시간으로 게시된 페이지만 볼 수 있다면 두 개의 <SvelteCounter /> 컴포넌트 중 client:visible을 사용한 컴포넌트를 어떻게 알 수 있습니까?

버튼을 클릭해 보고 어떤 버튼이 대화형인지 확인하세요. 사용자 입력에 응답하는 경우 client: 지시어가 있어야 합니다.

지식을 테스트해보세요

다음 각 컴포넌트에 대해 브라우저로 전송되는 내용을 선택하세요.

<ReactCounter client:load />
1. HTML 및 CSS만
2. HTML, CSS, JavaScript
<SvelteCard />
1. HTML 및 CSS만
2. HTML, CSS, JavaScript

체크리스트

Astro 통합을 설치할 수 있습니다.
UI 프레임워크 컴포넌트를 자신의 언어로 작성할 수 있습니다.
UI 프레임워크 컴포넌트의 수화를 위해 client: 지시어를 사용할 수 있습니다.