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

목록 페이지 vs 상세 페이지 — 그리고 조건 렌더링

화면이 다르면, 하나의 파일에 우겨넣지 않고 파일을 나눕니다

10초 핵심 요약

목록 화면과 상세 화면은 완전히 다른 페이지이므로, Astro에서는 파일 자체를 나눕니다 (Day 12의 파일 기반 라우팅 활용).
그래도 한 페이지 안에서 "데이터가 있을 때만 보여주기" 같은 작은 조건 분기는 여전히 필요합니다 — 이건 JS의 삼항 연산자나 &&로 처리합니다.
"페이지 종류를 나누는 것"과 "한 페이지 안 일부를 조건부로 숨기는 것"은 다른 문제입니다.

하나의 파일로 다 하려던 유혹

목록 페이지(카드 여러 개 요약)와 상세 페이지(글 하나 전체)는 보여줄 정보도, 레이아웃도 다릅니다. "한 파일 안에서 조건문으로 화면을 나눠 쓰면 안 될까?"라고 생각할 수 있지만, Astro는 파일 하나 = 페이지 하나라는 원칙(Day 12)을 그대로 따르는 게 훨씬 단순합니다.

index.astro

목록 페이지 — 카드 요약본 여러 개

[slug].astro

상세 페이지 — 글 하나의 전체 내용

"이 페이지가 목록인가 상세인가"를 코드 안에서 매번 검사하는 대신, 애초에 파일을 나누면 그 질문 자체가 사라집니다.

그래도 남는 작은 조건들

페이지를 나눠도, 한 페이지 안에서 "이 값이 있을 때만 보여주기" 같은 조건 렌더링은 여전히 필요합니다. 예: 요약이 없는 글은 요약 문단 자체를 생략하고 싶을 때.

    // summary가 있을 때만 문단을 렌더링

    {summary && <p class="post-card__summary">{summary}</p>}

&&는 "왼쪽이 참(값이 있음)이면 오른쪽을 실행/출력"이라는 뜻입니다. summary가 빈 문자열이거나 없으면 오른쪽 태그 자체가 화면에 나타나지 않습니다.

    // 값에 따라 둘 중 하나를 보여주는 삼항 연산자

    {thumbnail ? <img src={thumbnail} /> : <div class="post-card__thumb--empty"></div>}

삼항 연산자는 읽는 순서가 "조건 ? 참일 때 : 거짓일 때"입니다. Day 11에서 만든 썸네일 fallback도 사실 이 방식으로 다시 쓸 수 있습니다.

페이지 분리 vs 조건 렌더링 — 기준

상황	해결 방법
레이아웃 자체가 완전히 다른 화면 (목록 ↔ 상세)	파일을 나눈다 (Day 12 방식)
같은 레이아웃인데 일부 데이터만 있다 없다 하는 경우	`&&` / 삼항 연산자로 조건 렌더링

오늘의 실습

1Day 12에서 만든 [slug].astro에 목록에는 없던 본문 내용을 추가해 목록/상세를 시각적으로 다르게 만듭니다.

2더미 데이터 중 하나만 summary: ''로 비워두고, &&로 그 카드만 요약 문단이 빠지는지 확인합니다.

Day 13 완료 체크리스트

목록/상세를 왜 조건문이 아니라 파일 분리로 처리하는지 설명할 수 있다.

&& 연산자로 조건부 렌더링을 해봤다.

삼항 연산자로 두 화면 중 하나를 선택 렌더링해봤다.

스스로 설명해보기 — 목록/상세 화면을 조건문이 아니라 파일 분리로 처리하는 이유를 설명할 수 있나요?

오늘의 용어

조건 렌더링

특정 조건일 때만 화면 일부를 보여주거나 숨기는 것

왼쪽이 참일 때만 오른쪽을 렌더링하는 연산자

삼항 연산자

조건 ? A : B — 조건에 따라 둘 중 하나를 선택하는 문법