똑똑한 컴포넌트 만들기: 리팩토링과 Side Effect 방지

복붙의 늪에서 탈출하기

블로그 페이지가 늘어나면서(Flavors, Ingredients, Tasting…) 한 가지 문제가 생겼다. 바로 페이지 상단 헤더(Title Area) 코드가 모든 파일에 복사-붙여넣기 되어 있다는 점이었다.

“폰트 크기를 좀 줄여볼까?” 하는 생각이 들면, 5개의 파일을 일일이 열어서 수정해야 했다. 이건 개발자로서 용납할 수 없는 비효율(DRY 위반)이었다.

그래서 결심했다. PageTitle.astro 라는 만능 컴포넌트를 만들기로.

---

딜레마: 통일하되, 달라야 한다

하지만 문제가 있었다. 모든 페이지의 디자인이 똑같지 않았기 때문이다.

1. Group A (Ingredients, About): 그라데이션이 들어간 화려한 제목 + 아주 큰 폰트 (text-6xl)
2. Group B (Flavors, Tasting): 단색의 심플한 제목 + 적당한 폰트 (text-5xl)

컴포넌트를 하나로 합치면, 어느 한쪽의 디자인이 망가지는 사이드 이펙트(Side Effect)가 발생할 위험이 있었다.

---

해결책: “상황을 판단하는” 컴포넌트

나는 컴포넌트에게 ‘눈치’를 주기로 했다. highlight (그라데이션 줄 텍스트)라는 속성이 들어오면 “아, 여긴 힘을 줘야 하는 곳이구나”라고 판단하게 만드는 것이다.

// src/components/PageTitle.astro

// highlight 속성이 있으면 더 크게(6xl), 없으면 적당히(5xl)
const titleSizeClass = highlight 
  ? 'text-4xl md:text-6xl' 
  : 'text-3xl md:text-5xl';

그리고 HTML에서는 이 변수를 그대로 클래스에 적용했다.

<h1 class={`${titleSizeClass} font-extrabold ...`}>
{title}
</h1>

---

결과: 유연함과 견고함 사이

이제 나는 페이지를 만들 때 고민할 필요가 없다.

1. 화려하게 하고 싶으면?

<PageTitle highlight="Point" ... />

2. 심플하게 하고 싶으면?

<PageTitle ... />

컴포넌트 내부 로직이 알아서 디자인을 결정해 준다. 리팩토링은 단순히 코드를 줄이는 게 아니라, 미래의 고민을 줄여주는 작업임을 다시 한번 깨달았다.