PrimeVue의 장점 – Pass Through + tailwind

PrimeVue를 사용하게 된 매우 중요한 기능이 있는데, Pass Through 기능이다.

간단하게 설명하면 Style을 외부에서 주입할 수 있는 기능인데, 이 기능이 기존의 UI component 라이브러리의 문제점들을 많이 활용해 준다.

기존의 라이브러리들은 일반적으로 스타일링 기능이 두가지 정도로 압축된다.

특정 Symbol에 값을 스타일을 정의해서 값을 변경하는 것으로 스타일링을 변경하는 방식
일종의 Style Group을 정의하고 해당 Group을 변경해서 스타일 세트를 일괄적으로 변경하는 방식

일반적으로 이런 방법이 간편한게 사실이다. 기능적인 면에서만 접근한다면 기본 UI가 미려하기 때문에 개발자 입장에서는 별로 신경 쓸 요소가 줄어들기도 한다.

다만 이런 장점은 Prototyping에서는 큰 장점이지만, 실제 회사에서 제품을 개발하거나, 개인 프로젝트라 하더라도 나만의 스타일로 변경할 때 귀찮고 불편한 문제가 된다.

PrimeVue에서는 해당 기능을 Pass Through라는 방법으로 해결했다.
(기본적으로는 Strategy Pattern 과 유사한 느낌이지만, Vue가 view를 Html형태로 사용해서 완전하게 똑같지는 않은 것 같다.)

사용법은 다음과 같다.

<ComponentTag pt:[passthrough_key]:[attribute]="value" />

공식 홈페이지에서의 사용법이고, 아래에는 설명이 있다.

<Panel
    :pt="{
       root: {
         class='"border-1 border-solid'
       },
       header: {
          'data-test-id': 'testid',
          class: 'bg-blue-500',
          onClick: onHeaderClick
       }
    }"
>

pt 라는 key에 컴포넌트의 변경하고 싶은 설정을 넣으면 사용이 가능하다.

pt의 사용법은 2가지가 있다. 여기서는 local 사용법에 대해서만 설명한다.

Replace – 해당 Key를 내가 설정한 값으로 변경한다.
스타일을 넣는다면 내가 넣은 스타일 이외에는 모두 사라진다.
사실상 거의 안 쓴다. Global에서는 쓸 만하다. 다만 Preset을 쓰는게 좋다.
Merge – 해당 Key에 내가 설정한 값을 추가한다. 이때 같은 값이 있다면 overwrite된다.
실제 개발 시에는 이 기능을 편리하게 쓰게 된다.

두 가지 기능 중 Merge기능을 주로 쓰게 되는데, 다음과 같이 쓴다.

<InputText :pt="myInputStyle" :ptOptions="{mergeProps: false}">

이렇게 하면 pt에 들어간 항목은 기존의 값들과 합쳐지게 되면서 일부의 기능만 변경이 가능하다.

여기서 웃긴게, tailwind에서는 어떻게 쓰라는 말이 없다.
tailwind에서는 다음과 같이 써야 한다.

<Paginator :rows="20" :totalRecords="totalCount"
      :ptOptions="{ mergeProps: true }"
      :pt="{ pagebutton: 'h-6 min-w-6'}"/>

여기서 pagebutton으로 되어 있는 key값을 찾아야 하는데 이게 조금 웃긴다. 여기서 보통 많이 헷갈리게 된다. PrimeVue – Tailwind 공식 문서에는 설명이 없다.

이럴때는 기본 PrimeVue 문서로 돌아가서 다음 항목을 보면 된다.
예시로 사용한 Paginator 항목을 보고 싶다면 다음 페이지의 label 항목이 key가 된다.

https://primevue.org/paginator/#pt.doc.paginator

이렇게 하면 이전 포스팅에서 안내한 세팅과 함께 사용한다면 기본적인 프로토타이핑과 초~중기 프로젝트에서는 최소의 노력으로 프로덕트를 빌드할 수 있다.

댓글 달기 댓글 취소