삼항 연산자: 컴포넌트에게 "눈치"를 주는 법

카드 두 장의 딜레마

블로그 메인 화면을 리팩토링하던 중 고민에 빠졌다. ‘메인 카드(Feature)‘는 웅장하게 여백을 많이 주고 싶고, ‘일반 카드(Standard)‘는 컴팩트하게 만들고 싶었다.

처음엔 무식하게 생각했다. “그럼 BigCard.astro랑 SmallCard.astro를 따로 만들어야 하나?”

하지만 그건 비효율(DRY 위반)이었다. 내용은 똑같은데 여백 때문에 파일을 두 개나 관리해야 한다니. 나는 AI 파트너(Gemini)에게 물었고, “삼항 연산자(Ternary Operator)“라는 개념을 배웠다.

---

물음표(?)와 콜론(:)의 마법

삼항 연산자는 이름은 어렵지만 원리는 심플했다. 질문 하나로 두 갈래 길을 만드는 것이다.

조건 ? 참일_때_값 : 거짓일_때_값

마치 이런 대화와 같다.

“지금 비가 오니?”
→ (?)”응! 우산을 챙겨.”
→ (:)“아니! 그냥 나가.”

---

실전 적용: 여백(Padding) 조절하기

나는 이 로직을 Card.astro 컴포넌트에 적용했다. 카드의 사이즈(size)가 ‘feature’인지 물어보고, 맞다면 넓은 여백을, 아니라면 좁은 여백을 적용하라는 명령이다.

// src/components/Card.astro

const paddingClass = size === 'feature'  // 1. 질문: 이거 큰 카드야?
  ? 'px-8 py-8 md:py-10'                 // 2. 참: 응! 위아래를 시원하게 늘려줘.
  : 'px-8 py-6';                         // 3. 거짓: 아니, 일반형이야. 컴팩트하게 해줘.

그리고 이 변수(paddingClass)를 HTML 클래스에 쏙 넣어주었다.

<div class={`bg-white ... ${paddingClass}`}>
  </div>

결과: 하나의 코드로 두 가지 디자인

이 간단한 식 하나 덕분에 Card.astro 파일 하나로 모든 디자인을 커버할 수 있게 되었다.

좌우 여백(px-8)은 통일해서 텍스트 라인을 맞추고,

위아래 여백(py)만 상황에 따라 다르게 적용했다.

코딩은 단순히 기능을 구현하는 게 아니라, 이렇게 논리적인 규칙(Logic)을 세우는 과정이라는 걸 깨달았다. 이제 내 컴포넌트는 “눈치껏” 자신의 크기를 조절할 줄 안다.