mixin과 hoc 이해 확인 + 혼용해도 되는지?

Question

Q1. hoc와 mixin의 차이점에 대해 제가 이해한 바가 맞는지 확인 한번 부탁드립니다. hoc는 각각 동일한 구조가 반복 되고 있을때, 한개의 컴포넌트를 중간다리를 둬서 관리하기 편한 구조로 쓰기 위해 사용하는 것 같고.. ex) 계속 반복되는 컴포넌트를 여러개 두지 않고  한개로 만들어서 관리-> 코드의 반복성을 줄임 mixin의 경우 따로 관리하는 사이드로직(?)들을 걷어내어 관리해서 컴포넌트에 비지니스 로직만을 남겨서 구분하는 용도로 사용한다. ex) 주로 공통 data나 메서드. 모달을 열고닫는 data(), 로딩을 관리하는 로직   정도로 이해했는데 맞는지도 한번 확인 부탁드립니다:-) Q2. 그리고 hoc와 mixin을 둘 다 사용해도 괜찮은건가요? 제가 이번에 혼자 미니 프로젝트를 하게되었는데..제눈엔 둘다 좋아보여서 둘다 쓰고싶은데 그래도 되는것인지 잘 모르겠습니다. (mixin안에 render()함수를 넣어서 hoc처럼 겸해서 사용해도 될까요?)

캡틴판교 · Answer

안녕하세요 예란님 너무 좋은 질문이네요 :) 질문 주신 2가지 모두 믹스인과 HOC에 관련된 내용인 것 같아 종합해서 답변 드릴게요 :) HOC와 믹스인의 목적 모두 컴포넌트에 들어가는 특정 로직들을 재사용하기 위해서 사용합니다. 그랬을 때 두 기술의 장점은 모두 컴포넌트의 코드가 간결해지면서 코드 재활용성이 높아진다는 건데요. 반대로 단점은 HOC는 컴포넌트 레벨 깊이가 깊어지는 것이고 믹스인은 여러 개를 주입했을 때 특정 코드가 어느 믹스인에서 주입된건지 확인하기가 어렵습니다. 이 장 단점을 주지하신 상태에서 설계하시면 더 좋은 구조를 잡으실 수 있을거에요 :) 그리고 HOC와 믹스인 모두 혼용하셔도 됩니다. 저는 컴포넌트 깊이가 깊어지는 걸 별로 안 좋아해서 믹스인을 위주로 사용하고 있어요. 그런데 컴포넌트 성격에 따라서 HOC도 보통 함께 사용하고 있습니다. 참고로 이런 부분들을 새로 나오는 Vue.js API에서는 아래와 같이 해결하려고 하고 있으니 참고해보시면 좋을 것 같아요. https://vue-composition-api-rfc.netlify.app/api.html#setup 좋은 질문 주셔서 감사합니다 :)