Week 2 · 컴포넌트와 빌드타임 데이터 Day 10 / 42

배열과 .map() — 카드 여러 개를 한 번에 렌더링

오늘 처음으로 더미 데이터가 진짜 데이터로 바뀝니다

10초 핵심 요약

포스트 데이터를 배열로 준비하고, .map()으로 배열 개수만큼 카드를 자동 생성합니다.
Day 9의 카드 1개를 함수처럼 반복 호출하는 셈입니다 — 카드 개수가 늘어도 코드는 그대로입니다.
props 이름은 한 번에 1~2개씩만 확인하며 붙입니다. 한꺼번에 다 바꾸지 않습니다.

왜 한 번에 1~2개씩만 확인할까

정전됐을 때 두꺼비집의 퓨즈를 한꺼번에 다 뽑았다가 다시 끼우면, 나중에 어떤 퓨즈가 문제였는지 알 수 없습니다. 하나씩 갈아 끼우고 불이 들어오는지 확인해야 원인을 특정할 수 있습니다. props도 마찬가지입니다 — 5개를 동시에 연결하고 화면이 깨지면, 5개 중 어느 게 문제인지 찾는 데 시간이 배로 듭니다.

배열 준비하고 .map()으로 뿌리기

코드부터 보기 전에 반복이라는 개념을 먼저 짚고 갑니다. 붕어빵 틀은 하나뿐이지만, 그 틀에 반죽을 부어 넣을 때마다 붕어빵이 하나씩 나옵니다. 틀(모양)은 똑같이 두고, 안에 들어가는 재료(데이터)만 바꿔가며 같은 모양을 데이터 개수만큼 반복해서 찍어내는 것입니다. 프로그래밍에서 이렇게 "같은 틀을 데이터 개수만큼 반복해서 찍어낸다"를 실행하는 도구를 반복문이라 부르고, 배열을 다룰 때 가장 많이 쓰는 반복 도구가 바로 .map()입니다.

Day 9에서 만든 카드 컴포넌트를, 실제로는 여러 개의 데이터 객체를 담은 배열 하나로 반복 호출합니다.

    // index.astro

    ---

    import PostCard from '../components/PostCard.astro';

    const posts = [

      { title: '첫 번째 글', date: '2026-07-01' },

      { title: '두 번째 글', date: '2026-07-05' },

      { title: '세 번째 글', date: '2026-07-13' },

    ];

    ---

    <div class="post-list">

      {posts.map((post) => <PostCard {...post} />)}

    </div>

posts.map(...)는 "배열 안 항목 하나하나에 대해, 이 컴포넌트를 하나씩 만들어라"는 뜻입니다. 배열이 3개면 카드 3개, 100개면 카드 100개가 자동으로 나옵니다.

가장 흔한 실수 — {...post}의 스프레드(...) 를 빠뜨리면 객체 전체가 통째로 하나의 prop처럼 전달돼 Astro.props에서 개별 값을 꺼낼 수 없습니다. 꼭 ...을 붙이세요.

제목 하나만 먼저 연결

PostCard.astro 안에서, 더미 텍스트 딱 하나(제목)만 props로 바꿉니다.

    // 변경 전

    <h3 class="post-card__title">더미 포스트 제목입니다</h3>

    // 변경 후

    const { title } = Astro.props;

    <h3 class="post-card__title">{title}</h3>

저장 → 브라우저 새로고침 → 카드 3개에 각각 다른 제목이 나오는지 확인하는 것이 오늘의 검증 루틴입니다. 그다음 나머지 필드(날짜, 요약)도 같은 방식으로 하나씩 늘려갑니다.

Day 10 완료 체크리스트

더미 배열을 만들고 .map()으로 카드 3개를 렌더링했다.

{...post} 스프레드 문법의 역할을 이해했다.

제목 하나를 props로 연결하고 브라우저에서 확인했다.

스스로 설명해보기 — .map()이 배열 개수만큼 카드를 자동으로 만들어내는 원리를 설명할 수 있나요?

오늘의 용어

.map()

배열의 각 항목마다 함수를 실행해 새 배열(컴포넌트)을 만드는 메서드

스프레드(...)

객체의 모든 속성을 개별 props로 풀어서 전달하는 문법

검증 루틴

저장 → 새로고침 → 확인, 매 수정마다 반복하는 3단계