콘텐츠로 이동

첫 번째 Astro 아일랜드를 구축

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

이번에 배울 내용

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

Astro 프로젝트에 Preact 추가

  1. 실행 중인 경우 개발 서버를 종료하여 터미널을 실행합니다 (단축키: Ctrl + C).

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

      npx astro add preact

  3. 명령줄 지침에 따라 프로젝트에 Preact 추가를 확인합니다.

Preact 인사말 배너 포함

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

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

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

  2. 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에서 이 컴포넌트를 가져와 사용하세요.

    ---
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>

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

  4. 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>

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

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

    ---
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 />

체크리스트

추가 자료

기여하기 커뮤니티 후원하기