반응형 HOC2 🍳 HOC사용하여 로직 공통화 시키기 🥙 기능 공통화 상황 아래 사진 처럼 "테스트" 라는 버튼을 누르면 '모던,럭셔리' 와 '1990,2000s' validation 기능이 중복이 된다. 실제 실무에서는 로직이 이것보다 더 복잡하게 돌아가지만, 테스트를 위해서 간단하게 빈값 체크 정도만 기능을 넣었다. 🥙 전체적인 구조 withCuration을 통해 validation의 기능을 props으로 전달하고, props으로 전달 받은 컴퍼넌트들은 validation을 통해 기능을 사용할 수 있다. 🍟 withCuration.js 작성 const withCuration = (component) => { return { name: "withCuration", data() { return { curationInfo: { mood: [ { text: ".. 2023. 11. 5. 🎹 HOC 🩰 HOC vue에서 로직을 재활용 하는 방법은 여러가지가 있다. 그 중에 mixin이 있긴 하지만,, 로직이 복잡할수록 component랑 mixin변수가 겹쳐 관리의 어려움이 보인다. 그리하여 알아본 방법이 HOC(아직까지 현재 프로젝트에서 쓰지않음) 이다. HOC는 High Order Component인데, 함수의 인자에 컴퍼넌트를 받고 컴퍼넌트를 리턴해준다. 아직 Hello World 단계로 알아가는 중이다. 🎰 List,List2 로직 아래 사진처럼 데이터를 가져오는 주소는 다르지만,hocList를 세팅하는 과정은 같다. 이러한 비슷한 로직을 재활용 하는 방법중에 하나가 HOC이다. 👀 HOC 작성 withHoc.js를 만들며 관례적으로 withXXX 를 붙인다고 한다. 호출하는 URL를 받고,.. 2023. 10. 8. 이전 1 다음 반응형
