컨텐츠로 이동

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

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

요구 사항

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

새로운 `src/components/` 폴더 생성

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

탐색 컴포넌트 만들기

src/components/Navigation.astro라는 새 파일을 만듭니다.
모든 페이지의 상단에서 페이지를 탐색하기 위해 링크를 복사하여 새로운 파일인 Navigation.astro에 붙여넣습니다.
src/components/Navigation.astro
```
---
---
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
```
.astro 파일의 프런트매터에 아무것도 없으면 코드 펜스를 작성할 필요가 없습니다. 필요할 때 언제든지 다시 추가할 수 있습니다.

Navigation.astro 가져오기 및 사용

index.astro로 돌아가서 코드 펜스 내부에 새 컴포넌트를 가져옵니다.
src/pages/index.astro
```
---
import Navigation from '../components/Navigation.astro';
---
```
그런 다음 아래에서 기존 탐색 HTML 링크 요소를 방금 가져온 새 탐색 컴포넌트로 바꿉니다.
src/pages/index.astro
```
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<Navigation />
```
브라우저에서 미리보기를 확인하고 정확히 동일하게 보이는지 확인하세요. 그게 바로 여러분이 원하는 것입니다!

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

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

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

잊지 마세요

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

지식을 테스트해보세요

여러 페이지에 반복되는 요소가 있는 경우 이 작업을 수행할 수 있습니다.
1. 개발 서버 다시 시작
2. 재사용 가능한 컴포넌트를 사용하도록 리팩터링
3. 새 페이지 생성
Astro 컴포넌트는
1. 재사용 가능
2. HTML 조각
3. 위 항목 둘 다!
Astro 컴포넌트는 다음과 같은 경우 사이트에 자동으로 새 페이지를 생성합니다.
1. <html></html> 포함
2. 리팩터링
3. src/pages/ 안에 .astro 파일 존재

체크리스트

콘텐츠를 재사용 가능한 컴포넌트로 리팩터링할 수 있습니다.
.astro 페이지에 새 컴포넌트를 추가할 수 있습니다.

참고 자료

Astro 컴포넌트 개요
리팩터링 외부 링크