Button 컴포넌트 설계하기

아래와 같이 3 가지 버튼 컴포넌트를 개발해야 한다고 가정했을 때 어떻게 컴포넌트를 설계하면 좋을까요?

한 6개월 전에 제가 만든 Button 컴포넌트 API는 이랬습니다.

이 API는 확장성 측면에서 아쉬운 부분이 있어보입니다. 위 API대로 컴포넌트를 만들면 onClick 와 onMouseDown 이벤트 밖에 쓸 수 없는 Button 컴포넌트가 되어 버립니다.

만약 다른 버튼 이벤트를 사용하고 싶으면 어떻게 해야 할까요? 사용하고 싶은 버튼 이벤트가 있을 때마다 매번 props를 추가해야 합니다.

그리고 Button의 3 가지 디자인을 ButtonType을 정의하고 있습니다. 큰 문제는 없어보입니다. 하지만 Button 컴포넌트 코드를 살펴보면 분기 처리가 많아서 코드가 너무 지저분합니다.

코드가 너무 길고 분기처리가 너무 많아서 어질어질하네요…😇

만약 지금 동일한 Button 컴포넌트를 개발해야 한다면 저는 API를 이렇게 만들 것 같아요.

사실 onClick이나 onMouseDown은 따로 props를 만들어서 내려줄 필요가 없습니다. ButtonHTMLAttributes 타입을 상속하면 버튼 태그에서 사용할 수 있는 모든 기본 속성과 이벤트를 자동으로 포함할 수 있어서 onClick이나 onMouseDown과 같은 별도의 props를 만들 필요가 없습니다.

이렇게 하면 코드가 더욱 간결해지고 버튼의 기존 기능도 쉽게 활용할 수 있습니다.

그리고 Button 컴포넌트는 이렇게 될 것입니다.

엄청 심플해졌죠?

여기서 이 Button 컴포넌트를 확장해서 PrimaryButton, SecondaryButton, WarningButton을 만들어보겠습니다.

기본 Button 컴포넌트를 만들어놓고 각각 다른 스타일을 줘서 3가지 컴포넌트를 만들어보았습니다.

사용자에게는 Button 컴포넌트는 제공하지 않고 이 3가지 컴포넌트를 제공합니다. 이제 컴포넌트 이름도 더 명확해졌습니다.

CSS 코드도 나중에 디자인 수정이 필요할 때 쉽게 수정할 수 있도록 CommonStyle, SizeStyle, PrimaryButtonStyle, SecondaryButtonStyle, WarningButtonStyle로 나눴습니다.

이렇게 개발하면 나중에 또 새로운 Button 컴포넌트가 필요하게 되어도 전혀 문제가 되지 않습니다.

예를 들어 만약 SuccessButton이라는 초록색 버튼이 필요하게 되었다고 가정해보겠습니다.

이렇게 아래 코드만 추가하면 끝입니다!

UI 컴포넌트는 어떻게 설계하느냐에 따라 코드의 형태가 완전히 달라집니다. 그래서인지 설계하는게 참 재미있습니다.

그리고 대충 만들려면 쉽지만 공부를 하면 할 수록 어려워지는 부분이기도 합니다. 지금부터 6개월 후에 한번 더 Button 컴포넌트를 설계한다면 그때는 제가 어떻게 설계를 하고 있을지 궁금해지네요. 지금의 저보다 얼마나 성장하게 되었을지 연말에, 그리고 매년 비교해보면 재미있을 것 같네요.

끝까지 읽어주셔서 감사합니다!

전체 코드가 궁금하시면 여기서 확인하실 수 있습니다.