🎹 HOC

🩰 HOC

vue에서 로직을 재활용 하는 방법은 여러가지가 있다. 그 중에 mixin이 있긴 하지만,, 로직이 복잡할수록 component랑 mixin변수가 겹쳐 관리의 어려움이 보인다. 그리하여 알아본 방법이 HOC(아직까지 현재 프로젝트에서 쓰지않음) 이다.

HOC는 High Order Component인데, 함수의 인자에 컴퍼넌트를 받고 컴퍼넌트를 리턴해준다.

아직 Hello World 단계로 알아가는 중이다.

 

🎰 List,List2 로직

아래 사진처럼 데이터를 가져오는 주소는 다르지만,hocList를 세팅하는 과정은 같다. 이러한 비슷한 로직을 재활용 하는 방법중에 하나가 HOC이다. 

 

👀 HOC 작성

withHoc.js를 만들며 관례적으로 withXXX 를 붙인다고 한다.

호출하는 URL를 받고, 사용하고자 하는 Component를 인자로 받는다.

그리고 props를 통해 데이터를 전달한다.

 

🥹 withHoc를 통해 컴퍼넌트 리턴

withHoc를 통해 컴퍼넌트를 인자에 넣어준다.

 

withHoc => ListView순으로 컴퍼넌트가 생성되는 것을 확인할 수 있다.

위처럼 작성할 경우 코드의 양을 줄 일 수 있다는 장점이 확실히 있다.