컨텐츠로 건너뛰기
v5-beta

재사용 가능한 탐색 컴포넌트 만들기

이제 Astro 사이트의 여러 페이지에 동일한 HTML이 작성되었으므로 중복된 콘텐츠를 재사용 가능한 Astro 컴포넌트로 교체할 때입니다!

요구 사항

  • 컴포넌트에 대한 새 폴더 만들기
  • 탐색 링크를 표시하는 Astro 컴포넌트 구축
  • 기존 HTML을 재사용 가능한 새로운 탐색 컴포넌트로 교체

새로운 src/components/ 폴더 생성

섹션 제목: 새로운 src/components/ 폴더 생성

HTML을 생성하지만 웹 사이트의 새 페이지가 되지 않는 .astro 파일을 보관하려면 프로젝트에 src/components/라는 새 폴더가 필요합니다.

탐색 컴포넌트 만들기

섹션 제목: 탐색 컴포넌트 만들기

  1. src/components/Navigation.astro라는 새 파일을 만듭니다.

  2. 모든 페이지의 상단에서 페이지를 탐색하기 위해 링크를 복사하여 새로운 파일인 Navigation.astro에 붙여넣습니다.

    src/components/Navigation.astro
    ---
    ---
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>
섹션 제목: Navigation.astro 가져오기 및 사용

  1. index.astro로 돌아가서 코드 펜스 내부에 새 컴포넌트를 가져옵니다.

    src/pages/index.astro
    ---
    import Navigation from '../components/Navigation.astro';
    import "../styles/global.css";
    

    const pageTitle = "Home Page";
    ---

  2. 그런 다음 아래에서 기존 탐색 HTML 링크 요소를 방금 가져온 새 탐색 컴포넌트로 바꿉니다.

    src/pages/index.astro
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>
    <Navigation />

  3. 브라우저에서 미리보기를 확인하고 정확히 동일하게 보이는지 확인하세요. 그게 바로 여러분이 원하는 것입니다!

여러분의 사이트에는 이전과 동일한 HTML이 포함되어 있습니다. 하지만 이제 이 세 줄의 코드는 <Navigation /> 컴포넌트에서 제공됩니다.

직접 시도해 보기 - 사이트의 나머지 부분에 탐색 기능을 추가하세요

섹션 제목: 직접 시도해 보기 - 사이트의 나머지 부분에 탐색 기능을 추가하세요

동일한 방법을 사용하여 사이트의 다른 두 페이지 (about.astro 및 blog.astro)에서 <Navigation /> 컴포넌트를 가져와 사용합니다.

잊지 마세요

  • 코드 펜스 내부의 컴포넌트 스크립트 상단에 import 문을 추가합니다.
  • 기존 코드를 탐색 컴포넌트로 바꿉니다.

지식을 테스트해보세요

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

  1. 여러 페이지에 반복되는 요소가 있는 경우 이 작업을 수행할 수 있습니다.

  2. Astro 컴포넌트는

  3. Astro 컴포넌트는 다음과 같은 경우 사이트에 자동으로 새 페이지를 생성합니다.

체크리스트

섹션 제목: 체크리스트

참고 자료

섹션 제목: 참고 자료
기여하기

여러분의 생각을 들려주세요!

GitHub Issue 생성

우리에게 가장 빨리 문제를 알려줄 수 있어요.

커뮤니티