UI라이브러리 컴포넌트를 확장성 있는 공통 VUE 컴포넌트로 만들기

Bootstrap, Vuetify 등 UI 라이브러리를 쓰면

높은 퀄리티의 UI 컴포넌트를 쉽게 사용할 수 있다.

그러나 종종 커스터마이징을 어떻게 해야할지 고민이 생긴다.

보통 컴포넌트 내부 엘리먼트에 접근하기 위해

:deep(.class-name)과 같이 접근하곤 하는데,

문제는 한 화면에서 같은 컴포넌트를 서로 다르게 커스터마이징 해야하는 경우,

또 다른 화면에서 똑같은 스타일을 적용해야 하는 경우이다.

예를 들어,

buefy의 tooltip 컴포넌트의 배경색으로 바꾸고 싶다면, 아래와 같이 사용하면 된다.

그러나 어떤 컴포넌트는 검은색으로, 또다른 컴포넌트는 주황색으로 바꾸고 싶다면?

그때그때 클래스를 새로 적용한다. (CSS 오버라이드)

다른 화면에서도 검은색의 툴팁을 사용하고 싶다면?

스타일을 복사-붙여넣기 한다. (또는 모듈을 사용한다.)

위 문제를 해결하기 위해 조금 더 확장성 있는 컴포넌트를 아래와 같이 구성했다.

위와 같이 구성한다.

이제, 부모 컴포넌트에서 custom-tooltip.vue를 사용한다.

위 방법 말고도 다양한 해결방법이 있다.

- 커스텀 디렉티브를 만들어 확장하는 방법

- $variables를 활용해 테마를 확장하는 방법

많은 부분을 생략했지만, 스타일 뿐만 아니라 여러 로직이나 API가 포함되는 경우,

이렇게 컴포넌트로 래핑하는 것이 더 적합할 수도 있다는 생각이 든다.

• 또 좋은 아이디어가 있다면 알려주시면 감사하겠습니다.