컨텐츠로 이동

첫 번째 Astro 아일랜드를 구축

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

요구 사항

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

Astro 프로젝트에 Preact 추가

섹션 제목: Astro 프로젝트에 Preact 추가
  1. 실행 중인 경우 개발 서버를 종료하여 터미널을 실행합니다 (단축키: Ctrl + C).

  2. 단일 명령으로 Astro 프로젝트에서 Preact 컴포넌트를 사용하는 기능을 추가합니다.

    Terminal window
    npx astro add preact
  3. 명령줄 지침에 따라 프로젝트에 Preact 추가를 확인합니다.

Preact 인사말 배너 포함

섹션 제목: Preact 인사말 배너 포함

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

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

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

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

    src/components/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>
    );
    }
  3. 홈 페이지 index.astro에서 이 컴포넌트를 가져와 사용하세요.

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

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

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

    src/pages/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"]} />
    <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
    </BaseLayout>
  5. 페이지를 다시 방문하여 두 컴포넌트를 비교하십시오. 두 번째 버튼은 페이지가 로드 될 때 client:load 지시어가 Astro에게 클라이언트 에서 JavaScript를 보내고 다시 실행하도록 지시하여 컴포넌트를 대화형으로 만들기 때문에 작동합니다. 이것을 수화된 컴포넌트라고 합니다.

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

    src/pages/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"]} />
    <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>
  1. 다섯 가지 컴포넌트 중 어느 것이 수화된 아일랜드가 되어 JavaScript를 클라이언트에 전송하게 됩니까?

  2. <PreactBanner /> 컴포넌트는 어떤 면에서 동일하고 어떤 면에서 다를까요?

  3. SvelteCounter 컴포넌트에 숫자가 표시되고 숫자를 늘리는 버튼이 있다고 가정합니다. 웹사이트의 코드가 보이지 않고 실시간으로 게시된 페이지만 볼 수 있다면 두 개의 <SvelteCounter /> 컴포넌트 중 client:visible을 사용한 컴포넌트를 어떻게 알 수 있습니까?

지식을 테스트해보세요

섹션 제목: 지식을 테스트해보세요

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

  1. <ReactCounter client:load/>

  2. <SvelteCard />