예시 답변 1
약 90초
재사용 컴포넌트 추상화 범위 결
재사용 가능한 컴포넌트를 설계할 때 가장 먼저 하는 것은 어떤 부분이 진짜 공통이고 어떤 부분이 특정 화면에 종속되는지를 분리하는 것입니다. 처음에 너무 일반화된 컴포넌트를 만들다 보니 props가 지나치게 많아져 사용하는 쪽에서 오히려 불편해지는 경우가 있었습니다.
최소 두 곳 이상에서 실제로 쓰이는 경우에만 추상화하는 방식을 원칙으로 정했고, 이후 미리 추상화해서 쓰지 않는 컴포넌트가 줄었습니다. Storybook으로 컴포넌트를 독립적으로 문서화했는데, 어떤 props를 넣으면 어떻게 보이는지를 시각적으로 확인할 수 있어 팀원이 쓰기 쉬워졌습니다.
접근성 고려도 재사용 컴포넌트에서 중요한데, 버튼이나 입력 컴포넌트에 aria 속성을 처음부터 넣으면 모든 사용 지점에서 자동으로 적용됩니다. 재사용 컴포넌트는 얼마나 단순하게 쓸 수 있느냐가 좋은 추상화의 결임을 배웠습니다.
이 결의 특징
과도한 일반화로 props가 늘어난 경험을 계기로 최소 두 곳 이상 쓰이는 경우만 추상화하는 원칙을 세우고 Storybook 문서화까지 이어간 흔적이 있습니다.
이 결이 통하는 자리
단순하게 쓸 수 있느냐가 좋은 추상화의 결이라는 관점이 실제 원칙 변화로 뒷받침될 때 통합니다.