컴포넌트를 늘리지 말고 쳐내기: 성숙기 프론트엔드 정리법

버튼 하나 만들려다 여섯 번째 버튼을 또 만든 적 없나요?

새 화면을 붙일 때마다 컴포넌트를 하나씩 더 만들다 보면, 어느새 비슷하게 생긴 버튼이 대여섯 개 굴러다녀요. 얼마 전 제 개발 도구 폴더가 123개까지 불어난 걸 보고 한 번 싹 정리했더니 70개가 남더라고요. 절반 가까운 53개가 사실 안 쓰는 것이었어요. 이 '쳐내기'를 프론트엔드 컴포넌트에도 똑같이 적용해봤어요.

새로 만들기 전에 이미 있는지부터 본다

컴포넌트가 필요할 때 가장 먼저 하는 일은 새 파일을 여는 게 아니라 기존 폴더를 뒤지는 거예요. 직접 세어보니 저장소 안에 PrimaryButton, SubmitButton, IconButton처럼 이름만 다르고 하는 일은 거의 같은 버튼이 6종이나 있었어요. 이걸 variant prop 하나 받는 버튼 1종으로 합쳐보니 5개를 지울 수 있었어요.

이미 있나→기본 태그·CSS로 되나→한 컴포넌트로 합치나→그래도 없으면 새로

순서가 중요해요. 날짜 입력은 라이브러리를 붙이기 전에 브라우저 기본 input으로 되는 경우가 많고, 카드 강조선 하나 그으려고 컴포넌트를 새로 만들 필요도 없어요. 대부분은 CSS 몇 줄이면 끝나요.

지우는 게 더 빠른 정리다

안 쓰는 컴포넌트를 남겨두면 다음에 화면을 만드는 사람(대개 미래의 저)이 "이거 써도 되나" 하고 또 고민해요. 그래서 import 어디에도 안 걸린 컴포넌트를 찾아 지워봤어요. 30분 정도 걸렸는데, 번들도 가벼워지고 무엇보다 고를 선택지가 줄어서 다음 화면을 훨씬 빨리 붙였어요.

플랜씨(plan-c)의 계산기 화면을 만들 때도 결과를 보여주는 카드 컴포넌트 하나를 대출이자·복리·연봉 실수령에 그대로 재사용했어요. 계산기마다 카드를 새로 만들었다면 관리할 파일만 늘었을 거예요.

• ✓이미 있는지 먼저 보기
• ✓기본 기능 우선
• ✓안 쓰면 지우기

성숙기의 신호는 '많이'가 아니라 '적게'

컴포넌트든 도구든, 초반엔 늘리는 게 자연스러워요. 그런데 어느 정도 쌓이고 나면 늘리는 속도보다 쳐내는 감각이 더 중요해져요. 오늘 새 컴포넌트를 만들기 전에, 이미 있는 걸 한 번 더 열어보세요. 대개는 새로 안 만들어도 되더라고요.