Vue) Mixins VS HOC

JongIk Park·2021년 12월 28일
0

Vue.js

목록 보기
11/11
post-thumbnail

HOC과 Mixins

  • vue의 믹스인과 하이오더 컴포넌트 접근 방식을 학습하면서 두 가지 방법의 차이점에는 어떤 것이 있는지 의문이 생겨서 찾아보았다..

HOC

  • HOC는 리액트의 함수형 프로그래밍에서 기반한 컴포넌트 개발 패턴이다.
  • 컴포넌트의 코드를 재사용하기 위한 방법이기도 하지만 캡슐화와 컴포넌트 추상화를 구현하는 방법이기도 하다.
  • 컴포넌트의 로직을 훼손하지 않고 재사용성을 최대한 끌어올리겠다는 전략이기도 하다.

HOC를 이용한 접근 방식의 예

  • HOC를 이용하여 컴포넌트를 구현하게 되면 컴포넌트 관계에서 층이 하나 더 생기게 된다.
    - 일반 : 상위 - 하위
    - HOC : 상위 - HOC - 하위
    위와 같이 HOC 를 이용하여 컴포넌트를 개발해 나가는 경우, 상위와 하위의 컴포넌트 로직은 변경하지 않은 채 기능을 확장해 나갈 수 있다.
    가장 간단한 예시로는 상위 컴포넌트에 특정 이미지를 로딩하기위한 URL만 주입하고, 하위에서는 그 URL을 뿌리기만 하면 된다. 추가적인 로직은 HOC에서 해결한다.

Mixins를 이용한 접근 방식

  • 하지만 위와 같이 HOC를 이용한 접근 방식은 컴포넌트의 레이어를 복잡하게 만든다. 다시 말해 컴포넌트의 props, event 등을 넘겨야 하는 코드들이 많아진다.
    이에 비해 mixins는 문법도 간단하고 입문자에게 버거운 HOC 사고방식을 하지 않아도 되는 이점이 있다.
  • 물론 컴포넌트 기능 테스트 측면에서는 HOC가 mixins보다 유리하다.
  • 관심사의 분리 (separation of concerns) 측면에서는 컴포넌트의 역할이 깨끗이 분리가 되면서 기능을 확장할 수 있기 때문이다.

결론

  • Vue 에서는 mixins나 scoped slot을 최대한 활용하고, 만약 함수형 프로그래밍이나 컴포넌트 재사용성을 극대화하고 싶다면 HOC를 활용하여 컴포넌트 코드를 재활용하는 방법이 적절하다.
  • 때에 따라 적절히 사용하자!

참고사이트

profile
신입 프론트엔드 개발자

0개의 댓글