Vue3 컴포넌트 디자인 패턴 소개

vue mastery의 컴포넌트 디자인 패턴(component-design-patterns) 강의를 학습하고 정리한 내용입니다.

디자인 패턴에 관하여

어제 한 후배한테 실무에서 디자인 패턴을 사용하냐는 질문을 들었는데,

리액트로 UI 개발하면서 컴파운트 컴포넌트 패턴은 꽤 많이 사용하였고,

Vue3로 디자인 시스템을 개발하는 지금도 headlessUI(https://headlessui.com/vue/tabs)의 패턴을 꽤 많이 참고한다.

해당 링크의 탭만 하더라도 컴파운드 컴포넌트 패턴과 렌더리스 컴포넌트 패턴을 발견할 수 있다.

---

디자인 패턴은 왜 필요한가?

결국 아키텍처와 클린 코드란 것은

• 서로 독립적인 작은 단위로 기능들을 나누어 잘 합성할 수 있도록 해주는 것이다.
• 잘게 나누어진 기능들을 합하여 독립적이며 기능적인 의미를 가진 모듈을 만들어내는 것이다.

궁극적인 목표는 유지보수성(디버깅 용이성)과 재사용성이다.

그리고 디자인 패턴은 컴포넌트 개발 및 관리를 의한 모범 사례/기술이다.

 

UI 컴포넌트라면 독립적인 기능이라 하면 prop과 렌더 함수, hooks(stateful logic)과 같은 단위를 찾을 수 있겠고,

이를 합성한 모듈은 아토믹 디자인 패턴의 각 유닛이 될 수 있겠다.

 

컴포넌트 디자인 패턴은

컴포넌트를 개발하면서 마주치게 되는 특정 문제를 해결하면서

소프트웨어의 유지보수성 / 재사용성을 높이는 개발을 위한 도구다.

 

즉 디자인 패턴은 다음과 같은 용도로 사용할 수 있다.

1. 사용 및 유지 관리가 더 쉬운 컴포넌트 개발
2. 컴포넌트를 버그에 취약하게 만드는 일반적인 실수 방지
3. 앱에 가장 적합한 아키텍처 결정

물론 디자인 패턴이 만병통치약이 아니다.

특정 패턴을 사용하려면 당신이 속한 개발팀 내의 합의가 필요하다.

자바의 GOF에서처럼 장황하면서 자주 쓰지 않는 패턴들은 코드를 난독화한다 (--;)

1. 이것들은 지침이지. 규칙이 아니다.
2. 팀의 의견과 경험도 중요하다.
3. 당신의 팀에 가장 적합한 것을 선택하라

때로는 많은 상황에서 잘 작동할 수 있는 기술이나 모범 사례가 실제로는 다른 상황에서 안티 패턴일 수 있다.

중요한 것은 장단점을 이해하여 애플리케이션의 기능에 가장 적절한 선택을 내리는 것이다.

---

Vue3 의 컴포넌트 디자인 패턴

Vue3에서 컴포넌트를 설계하는데 사용할 수 있는 방법들은 매우 다양하다.

아래의 패턴들을 적절하게 사용하여 더 나은 컴포넌트를 구축할 수 있다.

수 많은 컴포넌트 설계를 위한 요소들

잘 보면 요새는 안쓰는 패턴들도 보인다.

특정 상황에서의 디자인 패턴 모범 사례가 실제로는 다른 상황에서 안티 패턴일 수 있음을 명심한다.

 

앞으로의 아티클에서 앞에서 나열한 디자인 패턴들을 알아본다.