Week 2의 시작 — 오늘 배우는 개념은 Astro를 벗어나도 그대로 씁니다
Astro.props로 값을 받아, { }로 화면에 꽂아 넣습니다.결혼식 초대장 100장을 인쇄한다고 생각해보세요. "안녕하세요, [받는사람 이름]님. [예식 날짜]에 초대합니다"라는 틀(템플릿)을 하나만 만들어두고, 인쇄기가 명단을 보면서 이름 자리에만 값을 하나씩 갈아 끼웁니다. 웹사이트도 똑같습니다. 포스트 카드 100개를 각각 손으로 만드는 대신, 카드 틀 하나를 만들고 제목·날짜 자리에 실제 데이터를 갈아 끼웁니다.
원리는 하나입니다: "이 컴포넌트가 화면에 그려지는 순간, 이 자리를 실제 값으로 바꿔치기한다." Astro에서는 이걸 {title}처럼 씁니다.
* 워드프레스는 <?= $title ?>, 옛날 티스토리는 [##_title_##] 식으로 표기만 다르게 씁니다. 지금은 몰라도 됩니다 — 원리를 한 번 익혀두면 나중에 다른 곳에서도 "아, 여기가 그 자리구나" 하고 알아볼 수 있다는 정도만 기억하면 됩니다.
.astro 파일은 두 부분으로 나뉩니다. 맨 위 ---로 감싼 frontmatter(빌드 타임에 실행되는 JS 코드)와, 그 아래 실제 화면 구조입니다. props는 frontmatter 안에서 Astro.props로 받습니다.
이 컴포넌트를 쓰는 쪽에서는 마치 원래 있던 HTML 태그처럼 값을 넘겨주기만 하면 됩니다.
Astro.props로 구조분해할 때 쓰는 이름(title)과, 사용하는 쪽에서 넘겨주는 속성 이름(title="...")이 정확히 일치해야 합니다. 철자 하나만 달라도 값이 조용히 undefined가 됩니다.
| 증상 | 원인 |
|---|---|
| 화면에 "undefined"가 그대로 보임 | props 이름 오타 (에러 없이 조용히 실패) |
| 컴포넌트 자체가 안 보임 | 상단 import 문 누락 |
| 값을 안 넘겼는데 빈 화면이 아니라 오류가 남 | 기본값 없이 필수 값처럼 사용 (TypeScript Props 타입 검사) |
console.log(Astro.props)를 잠깐 넣어 실제로 어떤 값이 들어오는지부터 확인하세요. 터미널(빌드 로그)에 출력됩니다.
src/components/에 있는 기존 컴포넌트 하나를 열어 Astro.props로 어떤 값을 받는지 찾아봅니다.Astro.props로 값을 받고 { }로 화면에 꽂는 흐름을 이해했다.